SCSS とは？

SASS は「サース」と読みます。Syntactically Awesome Stylesheets の頭文字をとってできています。

"Syntactically Awesome Stylesheets" は訳せば、「構文的にすごく良いスタイルシート」みたいな感じになるでしょうか。 SASS で書いたスクリプトは CSS にコンパイルされます。生成された CSS ファイルは、通常のスタイルシートとして使えます。

SASS とひと口に言っても、SASS には二種類の書き方があります。

ひとつめは、SASS の元々の構文である「インデント構文」(Indented Syntax) と呼ばれる書き方です。ファイルの拡張子は .sass です。

そして二つ目は 「SCSS」 と呼ばれる書き方です。ファイルの拡張子は .scss とします。 SCSS は「CSS のスーパーセット」であり、CSS は全て SCSS ともいえます。

正確な統計は知りませんが、おそらく SCSS で書いている人がほとんどではないかと思います。インデント構文か SCSS か、どちらを使おうか迷っている人には SCSS をおすすめします。

SASS を利用すると、mixin などを定義できて CSS コードの再利用性をしやすくなります。

さらに、多数の便利なビルトイン関数が用意されているために、柔軟な CSS コードを記述することが可能になります。

その他、sass コンパイラには最小化オプションも備わっているので、必要に応じて最適化された CSS コードを生成することもできます。