Sass (スタイルシート言語)

サス

デザイン：	ハンプトン・キャトリン
開発者	ナタリー・ワイゼンバウム、クリス・エップスタイン
初登場	2006年11月28日; 17年前 (2006-11-28)
安定リリース	1.75.0 [1] / 2024年4月11日; 5か月前[1] (2024-04-11)
タイピングの規律	動的
OS	クロスプラットフォーム
ライセンス	MITライセンス
ファイル名拡張子	.sass、.scss
Webサイト	sass-lang.com
主な実装
ダーツ
影響を受けた
CSS (「インデント」と SCSS の両方) YAMLとHaml (インデント構文) 少ない（SCSS）
影響を受けた
Less、Stylus、Tritium、Bootstrap (v4+)

Sass ( syntactically awesome style sheetsの略) は、カスケーディング スタイル シート(CSS)に解釈またはコンパイルされるプリプロセッサ スクリプト言語です。SassScript はスクリプト言語そのものです。

Sass は 2 つの構文で構成されています。オリジナルの構文は「インデント構文」と呼ばれ、Hamlに似た構文を使用します。^{[2] [3]}インデントを使用してコード ブロックを区切り、改行文字を使用してルールを区切ります。新しい構文であるSCSS (Sassy CSS) は、CSS のようなブロック フォーマットを使用します。中括弧を使用してコード ブロックを示し、セミコロンを使用してブロック内のルールを区切ります。インデント構文ファイルと SCSS ファイルには、従来、それぞれ .sass と .scss という拡張子が付けられています。^[4]

CSS3 は、適用されるルールをグループ化する一連のセレクタと疑似セレクタで構成されています。Sass (両方の構文のより大きなコンテキストでは) は、より伝統的なプログラミング言語、特にオブジェクト指向言語で使用できるが CSS3 自体では使用できないいくつかのメカニズムを提供することで CSS を拡張します。SassScript が解釈されると、Sass ファイルで定義されているさまざまなセレクタの CSS ルールのブロックが作成されます。Sass インタープリタは SassScript を CSS に変換します。または、Sass は .sass ファイルまたは .scss ファイルを監視し、.sass ファイルまたは .scss ファイルが保存されるたびに出力 .css ファイルに変換できます。^[5]

インデントされた構文はメタ言語です。SCSS はネストされたメタ言語であり、 CSS のスーパーセットです。有効な CSS は、同じセマンティクスを持つ有効な SCSS です。

SassScriptは、変数、ネスト、ミックスイン、^[3]、セレクタ継承^[2]などのメカニズムを提供します。

Sassは当初ハンプトン・キャトリンによって設計され、ナタリー・ワイゼンバウムによって開発されました。^{[6] [7]}

SassScript は複数の言語で実装されていますが、注目すべき実装は次のとおりです。

• 公式オープンソースDart実装。^[8]
• npmの公式「sass」ノードモジュール。これは純粋なJavaScriptにコンパイルされたDart Sassです。^[9]
• ネイティブDart実行可能ファイルをJavaScriptでラッパー化した公式の「sass埋め込み」ノードモジュール。^[10]
• オリジナルのオープンソース Ruby実装は2006年に作成されましたが、^[8]メンテナー不足のため非推奨となり、2019年3月にサポート終了となりました。^{[11] [12]}
• 公式のオープンソースC++実装であるlibSassは、2020年10月に非推奨となりました。^[13]
• 非推奨のlibSassをベースにした、npm上の非推奨の「node-sass」ノードモジュール。 ^[14]
• JSassは非公式のJava実装であり、^[15]廃止されたlibSassに基づいています。^[16]
• phamlp、 PHPの非公式Sass/SCSS実装。^[8]
• VaadinにはSassのJava実装がある。^[17]
• Firebug は、Web開発用のFirefox XUL（「レガシー」）拡張機能です。 ^[18] Firefox自体に統合された開発者ツールに取って代わられ、廃止されました。Firefox 57でXUL拡張機能のサポートが廃止されて以来、動作しなくなりました。

Sassでは変数を定義することができます。変数はドル記号（$）で始まります。変数の割り当てはコロン（:）で行います。 ^[18]

SassScriptは4つのデータ型をサポートしています: ^[18]

• 数値（単位を含む）
• 文字列（引用符付きまたは引用符なし）
• 色（名前）
• ブール値

変数は、利用可能ないくつかの関数の引数または結果となることができます。^[19]翻訳中に、変数の値は出力CSSドキュメントに挿入されます。^[2]

CSSは論理的なネストをサポートしていますが、コードブロック自体はネストされていません。Sassでは、ネストされたコードを互いに挿入することができます。^[2]

名前空間のネストや親参照などのより複雑なタイプのネストについては、Sassのドキュメントで説明されています。^[18]

@forSass では、、、を使用して変数を反復処理することができ@each、@whileこれを使用して類似のクラスまたは ID を持つ要素に異なるスタイルを適用できます。

ミックスインは引数もサポートします。^[2]

CSS3はドキュメントオブジェクトモデル（DOM）階層をサポートしていますが、セレクタの継承は許可されていません。Sassでは、@extendキーワードを使用して別のセレクタを参照するコードブロック内に行を挿入することで継承が実現されます。拡張されたセレクタの属性は、呼び出し元のセレクタに適用されます。^[2]

Sassは多重継承をサポートしています。^[18]

2012年のHTML5開発者会議で、Sassの作者であるハンプトン・キャトリン氏は、キャトリン氏、アーロン・レオン氏、およびMoovwebのエンジニアリングチームによって開発されたSassのオープンソースC++実装であるlibSassのバージョン1.0を発表しました。^{[20] [21]}

Catlin によれば、libSass は「何にでもドロップでき、その中に Sass が含まれます...今日から Firefox にドロップして Firefox をビルドすれば、そこでコンパイルされます。私たちは、それが可能であることを確認するために、独自のパーサーを一から作成しました。」^[22]

libSass の設計目標は次のとおりです。

• パフォーマンス – 開発者はSassのRuby実装に比べて10倍の速度向上を報告しています。^[23]
• より簡単な統合 – libSassにより、Sassをより多くのソフトウェアに統合することが容易になります。libSassが登場する前は、Sassを言語やソフトウェア製品に緊密に統合するには、Rubyインタープリター全体をバンドルする必要がありました。対照的に、libSassは静的にリンク可能なライブラリで、外部依存性がなく、Cのようなインターフェースを備えているため、Sassを他のプログラミング言語やツールに直接ラップすることが容易です。たとえば、オープンソースのlibSassバインディングは現在、Node、Go、Ruby向けに存在します。^[21]
• 互換性 – libSassの目標は、Sassの公式Ruby実装との完全な互換性です。この目標はlibsass 3.3で達成されました。^[24]

• Less（スタイルシート言語）
• スタイラス（スタイルシート言語）

• Ndia, John Gichuki; Muketha, Geoffrey Muchiri; Omieno, Kelvin Kabeti (2019). 「Sassy Cascading Style Sheets の複雑度メトリック」(PDF) . Baltic Journal of Modern Computing . 7 (4). doi :10.22364/bjmc.2019.7.4.01.
• Cederholm, Dan (2013). Sass for Web Designers (PDF) . A Book Apart. ISBN 978-1-937557-13-3。
• Watts、Luke (2016)。『Mastering Sass』。Packt Publishing。

• 公式サイト