Sass（Syntactically Awesome Style Sheets）は2006年、米国のハンプトン・カトリン（Hampton Catlin）が設計し、ネイサン・ヴァイゼンバウム（Natalie Weizenbaum）が実装を引き継いだCSSプリプロセッサです。Ruby on Railsを世に送り出したDavid Heinemeier Hansson周辺コミュニティから生まれ、変数・ネスト・ミックスイン・パーシャル分割といった、当時のCSSにはなかった概念をスタイルシートに持ち込みました。現在は実装の主役がDart Sassへ移り、CSS本体への機能フィードバックも続けながら長く使われ続けています。
この記事の目次
- Sassが追加した主要機能
- Ruby SassからDart Sassへ
- 実務での使われ方
- Less・PostCSS・素のCSSとの違い
- まとめ
Sassが追加した主要機能
Sassが提供する代表的機能は、変数・ネスト・ミックスイン・継承・関数の5つです。$primary: #1e40af; のように色やサイズを変数化し、@mixin button($color) { ... }で共通スタイルを定義、@include button($primary)で展開する、というスタイル設計を2006年時点で可能にしました。セレクタのネストにより.card > .card__title { ... } のような階層構造を視覚的に書ける点も、CSS書きの体験を大きく変えました。
@useや@forwardによるモジュールシステム、関数（lighten / darken / mixなど）、条件分岐（@if / @else）、ループ（@for / @each）、@extendによる継承などが揃っており、「スタイルシートにロジックを持ち込みたい」要件を一通り満たせます。BootstrapやFoundationといった主要CSSフレームワークがSassで書かれているのもこの表現力ゆえで、テーマカラーやブレークポイントを上書きしてビルドする運用が広まりました。
Ruby SassからDart Sassへ
Sassは2006年11月、ハンプトン・カトリンがHamlプロジェクトの一部として最初の実装をRubyで公開しました。2008年からはネイサン・ヴァイゼンバウムがメンテナとなり、SCSS構文（CSSとほぼ互換の波括弧構文）の追加、ミックスインや関数の体系化を進めました。ただしRubyランタイムを必要とする実装は、Node.js全盛のフロントエンド開発との相性が悪く、2010年代に入るとパフォーマンス問題と実行環境の重さが課題になっていきます。
2010年にC++実装のLibSass（およびnode-sass）がアーロン・レヴェンソンらにより登場し、Node.js用バインディングを通じて広く採用されました。しかしSass本家の機能追加に追従できず、2019年にLibSass / node-sassの開発終了がアナウンス。代わりに2016年から開発されていたDart Sassが正式な参照実装となり、JavaScript版（dart-sass）とCLIが提供される形に整理されました。2020年代後半時点では、Webpack・Vite・PostCSSのいずれもDart Sass経由でビルドする構成が標準です。
実務での使われ方
現在の現場ではnpm install sass（Dart Sassのnpmパッケージ）を導入し、Vite・Webpack・Parcel・Astroなどモダンビルドツールに統合して使うのが基本です。ファイル名の先頭にアンダースコアを付けたパーシャル（_variables.scss、_mixins.scssなど）を作って@use 'variables';で読み込む構造を取り、コンポーネント単位でscssを分割する設計が定番になっています。
BootstrapはSCSSで配布されており、$primaryや$grid-breakpointsなどの変数を上書きしてからコンパイルすれば独自テーマが作れます。Tailwind CSSのようなユーティリティファーストの台頭でSassを使わない構成も増えてきましたが、デザインシステムを自前で構築している企業や、長年運用しているコードベースでは依然としてSassが主流。Next.js・SvelteKit・Astroなどのフレームワークも、scssファイルをコンポーネントから直接importできるよう標準対応しています。
Less・PostCSS・素のCSSとの違い
Sassとよく比較されるのが、2009年にアレクシス・セルリエ（Alexis Sellier）が公開したLessです。Lessは構文がCSSにより近く、Twitter Bootstrap初期に採用されたことから一時期広く使われましたが、2013年公開のBootstrap 4でSassに移行したことを契機にシェアを縮小しました。PostCSSはアンドレイ・シトニク（Andrey Sitnik）が2013年に公開したプラグイン式のCSS変換ツールで、Autoprefixerやcssnanoなど特定機能のプラグインを組み合わせる思想が異なります。
近年はCSS自体が進化し、カスタムプロパティ（CSS変数：var(--primary)）が全主要ブラウザに実装され、2023年以降はCSSネスト（&セレクタ）もChromium・Safari・Firefoxで利用可能になりました。「Sassでしかできなかった機能」は減りつつあり、新規プロジェクトでは素のCSS＋PostCSSプラグインを選ぶ流れも強まっています。とはいえ、@mixinや関数による複雑なロジック表現、既存資産との互換性を考えれば、Sassは当面主要な選択肢の一つであり続けるでしょう。
まとめ
Sassは2006年の登場以来、変数とミックスインという発想をWeb開発の常識に定着させ、CSS本体の進化にも影響を与え続けました。Dart Sass主流の時代に入って実装は安定し、Bootstrapを含む既存資産とも整合します。CSSの標準機能拡張と棲み分けつつ、当分は中規模以上のフロントエンドで使われ続ける道具です.
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント