Sassとは
SassはCSSを生成するためのメタ言語（言語を作ることができる言語）です。
Sassを使用することによって、より簡潔にCSSの記述ができるため効率的なコーディングを行うことが可能になります。
Sassで書かれた記述をコンパイルすることでCSSが生成されます。
style.scssというSassファイルをコンパイルしてstyle.cssを生成し、HTMLファイルからはstyle.cssへリンクを貼るといった考え方です。
コンパイルって何？
コンパイルとは、プログラミング言語で記述されたソースコードを、コンピュータ上で実行可能な形式に変換する作業のことです。
ブラウザはSassに書かれた記述をそのまま理解することができないので、ブラウザが理解可能なCSSの記述に書き出すと考えると分かりやすいでしょう。
コンパイルに必要な環境 – コンパイラ
コンパイルを行うにはコンパイラという環境の準備が必要になります。
環境を準備するに当たって、Rubyのインストールなど初めての方には慣れない作業が多く挫折してしまう方が少なくありません。
ここでは初めての方でも簡単に準備ができるPreprosというコンパイラを紹介します。
Sass初心者でもすぐに使うことができるコンパイラ – Prepros
PreprosはmacOS / windows / Linuxに対応したコンパイラです。
「Download Free Unlimited Trial」と書かれたボタンから、ダウンロードページへ移動できます。
ダウンロードページへ移動したらOSを選択してダウンロードを開始できます。
ダウンロードが完了したらインストーラーを実行して、インストールを行ってください。
Preprosの基本的な使い方
Preprosを起動するとウィンドウが立ち上がり、ブロジェクトフォルダの追加をするようメッセージが表示されます。
画面上にローカルサイトフォルダをドラッグアンドドロップするか、青いテキストで書かれたbrowseというリンクをクリックしてローカルサイトフォルダを選択します。
※Preprosの起動中定期的にライセンス購入を促されますが、無料のトライアル版を使い続けることができます。
画面が切り替わりプロジェクトフォルダの内容が表示されます。
複数のプロジェクトフォルダを追加する場合、この場面の左下から「Add Project」をクリックします。
これでプロジェクトフォルダ内の .scss と拡張子がついたSassファイルを保存すると、自動的にCSSファイルが生成されます。
例えば test.scss とファイルを作成して保存をした場合、test.css が自動的に生成されることになります。
Sassファイルを保存するたびにCSSファイルは自動で上書き保存されます。
HTMLファイルからはCSSファイルへリンクを貼っておくだけで、自動的にSassに書いた記述が反映されます。
