『SCSS』とは?
CSSを見やすく、書きやすくする拡張言語の『SASS』の1つ。
直訳すると『文法的に素晴らしいスタイルシート』。
実際にCSSとして使用するためにはSCSSファイルをCSSファイルにコンパイル(変換)する必要がある。
『SASS』と『SCSS』の違い
SASS・・・インデントを使う記法でCSSとはかなり相違がある。通常のCSSルールで記述するとエラーがでる
SCSS・・・CSSと互換性があるので通常のCSSルールで書いてもエラーがでない。記述方法がCSSとほぼ同じでとっつきやすい
『SCSS』を使うメリット
①変数が使える
→phpやjavascriptのように変数によく使う値を格納しておけるので、変更する際に1箇所の変更ですむ
→自分で分かりやすい変数名をつけれるのでコードが解析しやすくなる
②階層構造を使える
→htmlのように階層構造でコードを記述できるので、記述量を減らせたりメンテナンスしやすいコードにすることが出来る
③ミックスインという機能が使える
→『@mixin』というコードを使うことでコードの塊(関数に似ている)を作成し、複数の場所で呼び出して使用することが出来る
④継承という機能が使える
→親要素で指定したスタイルを別の子要素でそのまま使用したり、追加でスタイルを当てて使用したりすることが出来る
『SCSS』のコンパイル手順
①エディタのダウンロード
代表的なコードエディタ
・Brackets
・Sublime Text
・Visual Studio Code
・Atom
②コンパイラの準備
GUIコンパイラ
・koala
・prepros
→アプリを立ち上げてファイルかフォルダを選択すると、アプリを立ち上げている間は自動でコンパイルしてくれる。
コンパイル後のスタイルも選択できる。
プラグイン『Live Sass Compiler』を使用する(VSCodeのみ)
①『Live Sass Compiler』をインストール
②コンパイルの監視を開始
③SCSSのコーディングを行う