Sassの概要
Sass（Syntactically Awesome Style Sheets）はCSSに変数や関数などの機能を追加したスタイルシート言語です。文法はCSSとほとんど変わらないため、学習にかかるコストはとても低いです。それでいて、一度使うとCSSに戻れなくなるぐらい便利です。また、コーディング効率やソースコードの保守性を向上させるのにも有用です。
SassにはSASS記法とSCSS記法の2種類が用意されていますが、後から追加されたSCSS（Sassy CSS）がCSSの記述に近く、最近はSCSS記法が主流です。
どちらの記法でもブラウザは解釈できないので、コンパイルしてCSSファイルを出力する必要がありますが、アプリを使ってコンパイルを自動化することができます。
また、SCSS記法であれば普通のCSSもそのままコンパイルできるため、最初は普通のCSSとして記述し、必要な際にSCSSの機能を利用するといった使い方もできます。
特徴
- CSS互換
- 読みやすい
- 変数、入れ子、ミックスインなどの言語拡張
- 作業の効率化
- 可読性重視や、読み込み速度重視などカスタマイズ可能な出力
GUIソフトPreprosのインストール
Sassのコンパイルはnpm（Node Package Manager）というコマンドラインベースのツールがありますが、付随して様々なツールをインストールする必要があるため、最初は無料のGUIツールを使うのが良いと思います。GUIツールの中でお薦めなのがPreprosというアプリケーションです。
PreprosはSassのコンパイル以外にも様々な言語に対応し、なおかつローカルサーバも提供します。Preprosは無償で使えますが、有料のライセンスを購入するまでポップアップが表示されます。
インストールと使い方は下記を参考にしてください。
SassのGUIコンパイラ Prepros 【インストール＆使い方】
Preprosのインストールが済んだら、Preprosを起動してください。PreprosでSassファイル関連を管理したい場合、アプリ左下の[+]ボタンを押して管理したいSassファイルがあるフォルダを選択するか、フォルダをPreprosにドラッグアンドドロップして追加します。
フォルダを追加すると自動でSassファイルなどが右カラムに表示されます。
Sassの使い方
- 任意の場所に test というフォルダを作成します。
- test.scss というファイルを作成します。
- Preprosを起動します。
- testフォルダをPreprosにドラッグ＆ドロップします。
- Preprosのパネルに test.scss が表示されます。
- 右カラムにオプションが表示されるので、任意で設定します。
アウトプットスタイルの選択は、圧縮してくれる Compact がおすすめです。
※コンパイルするアプリ（今回の場合はPrepros）は起動した状態にしておかないと、CSSが吐き出されないので注意。 - 試しに、以下のコードをtest.scssに記述してみてください。
.box{ padding: 0; h1{ font-size: 12pt; } } - ファイルを保存すると、自動的にscssファイルと同じディレクトリ内にtest.cssが作成されます。