読み方 ： サス

概要

CSSはWebページの見た目を定義するための言語だが、大規模なプロジェクトになるほどコードが膨大になり、同じ色コードや数値を何度も繰り返し記述しなければならない場面が増える。Sassはこうした課題を解消するために設計された言語で、専用の処理系でCSSに変換してWebサイトに発行する。

プログラミング言語のように変数を定義することができ、頻繁に使う色やフォントサイズを変数として定義しておけば、変更が必要になった際に一か所を修正するだけで全体に反映できる。ネスト機能を使うと、HTMLの構造に沿った階層的なスタイル記述が可能となり、コードの見通しがよくなる。「ミックスイン」（mixin）と呼ばれる機能では、スタイルのまとまりを定義して複数箇所で再利用でき、引数を渡して動的に変化させることもできる。

Sassには2種類の記法が存在し、ファイル名の拡張子で区別される。一つは初期からある「インデント記法」（.sassファイル）で、波括弧やセミコロンを省略してPythonプログラムのようにインデント（字下げ）で構造を表現する。もう一つは後から導入された「SCSS記法」（.scssファイル）で、通常のCSSの構文に近い形で記述できるため、既存のCSSからの移行がしやすい。現在はSCSS記法が主流となっている。

SassファイルはWebブラウザなどが直接解釈できないため、使用前にCSSファイルへ変換（コンパイル）する必要がある。このコンパイル処理にはDart言語で実装された「Dart Sass」が公式の実装として推奨されており、コマンドラインやWebpackなどのビルドツールと組み合わせて使用することができる。類似のツールとして「Less」や「Stylus」も存在するが、Sassはエコシステムの成熟度や採用実績の豊富さから、現在もCSSプリプロセッサの代表的な存在として広く利用されている。

この記事の著者 ： (株)インセプト IT用語辞典 e-Words 編集部
1997年8月より「IT用語辞典 e-Words」を執筆・編集しています。累計公開記事数は1万ページ以上、累計サイト訪問者数は1億人以上です。学術論文や官公庁の資料などへも多数の記事が引用・参照されています。