【CSS】今話題の「Sass(サス)」や「LESS(レス)」とは？

SassやLESSとは？

CSSは、CSS3になって格段に覚えることが増えましたが、Sassは、CSSコーディングの手間を減らして楽をしようという思想で作られたCSSの拡張言語のことです。

また、特徴としてはあくまでCSSを便利に作成する言語という位置づけであり、実際にページでSassがそのまま使われるわけではなく、最終的なアウトプットとしては通常のCSSになるということは理解しておいて下さい。

Sassが生まれた背景

Webサイトのリッチ化によるCSS再利用の需要が高まったため。

元々CSS自体はプログラミング知識がなくても扱えるようにかなりシンプルな構文になっています。ただ、最近はリッチ化、大規模化、複雑化していることが原因です。（レスポンシブ対応、ブラウザ上でネイティブアプリ実行など、CSS3による高機能化）、CSSにもコードの再利用やコンポーネント化などの需要が生まれてきたためです。

リリースノート

バージョン	リリース時期	備考
1.0	おそらく2006年ごろ
2.0
3.0	おそらく2013年ごろ	・CSSと似た記法で記述できるSCSS記法が導入された。（それ以前はSass記法のみだった）、これにより利用者が増えて一気に普及した。
3.3	2013年10月	「@at-root」が追加された。

なお、純正のsassはruby製しかなかったのですが、2015年ごろからC++で開発されたlibSassができてnode環境で動くようになりました。（なお、2020年以降は「libSass」は非推奨となっているみたいで「DartSass」を使うことが推奨されているようです。）

Sassの構文の種類

Sassには、構文によって下記の2種類に分かれます。どちらの構文で書かれたとしても相互に変換や、インポートをすることができます。

構文	説明
SCSS(Sassy CSS)
Saas(インデント構文)

Sassでできること

ファイルをまとめる

開発時は複数ファイルに分かれている方が楽だが、リクエスト数を抑えるためにできるだけ公開時は1つのファイルにしておきたいという要望に応えることができます。

別ファイルの読み込みができる。

「@import」ディレクティブという構文を使うことによって、別ファイルを読み込むことができます。

変数を使う。

「$」を先頭につけることで、変数宣言することができるので、変更に強くなります。

宣言ブロックのネストができる。

Mixins

関数のようにコードを外出しすることができます。

継承ができる。

「@extend」を使うことで、継承させることができます。

LESSの特徴

基本的には、Sassとほぼ同じです。

ただ、「Saas」に比べると少しシンプルな記述方法になります。

学習コストにそれほど差はありません。