SCSS(Sassy CSS)とは

SCSS とは

Sassの記法には、「SASS記法」および「SCSS記法」の2種類があります。

「SCSS」は「SASS記法」の後に登場し、Sassバージョン3.0以降で使用可能になりました。

Sassは、CSSのプリプロセッサ・メタ言語であり、変数や関数を用いて記述することも可能なことから、プログラミング言語のように効率的でわかりやすく記述できることが特徴です。

このプログラミング言語のように記述するための方法が、SASS と SCSSです。

はじめに「SASS記法」が作られ、その後「SCSS記法」が作られました。

SCSS記法は、「入れ子構造」をメインとした記述方法です。

基本的な書き方はCSSとほとんど変わりません。CSSセレクタの後にブロック{}を付与し、そのブロック内部にプロパティと値を記述します。値の後はセミコロン(;)を付けて終わります。

また、ブロック内部には別のセレクタを入れ子構造のように記述することができます。

入れ子構造によって「より見やすくなったCSS」というように捉えることができるため、今まで素のCSSを扱ってきた人にとっても非常に馴染み深く、それゆえに学習コストも少なく済むため、導入しやすい記法です。

SCSSは、Sassバージョン3.0以降で使用可能です。今から始めるという場合に3.0よりも前のバージョンを使うということはあまりないとは思いますが、バージョン確認は忘れず行いましょう。

SCSSファイルの拡張子は「.scss」です。

Sassを用いた様々なフレームワークやライブラリがありますが、そのほとんどはSCSS記法が採用されています。

例えば、CSSフレームワークで有名な"Bootstrap"も、その全てが「.scss」のSCSS記法によって書かれています。

このことからも、SASSとSCSSの2つのうち、現在の主流はSCSSといっても過言ではないでしょう。

学習コストの低さからもライブラリの充実さからも、Sassを始めるにあたってSCSS記法を学習することが無難な選択肢となっています。