 Sassのロゴ | |
| 登場時期 | 2006 |
|---|---|
| 設計者 | ハンプトン・キャトリン |
| 開発者 | ネイサン・バイゼンバウム、クリス・エプシュタイン |
| 最新リリース | 3.5.5/2021年5月12日 (4年前) (2021-05-12)[1] |
| 型付け | 動的 |
| 主な処理系 | Ruby、C++、Dart |
| 影響を受けた言語 | CSS、YAML、Haml、LESS |
| 影響を与えた言語 | LESS、Stylus、Tritium |
| プラットフォーム | クロスプラットフォーム |
| ライセンス | MITライセンス |
| ウェブサイト | http://sass-lang.com/ |
| 拡張子 | sass、scss |
| テンプレートを表示 | |
Sass（サース[2][3]、英:SyntacticallyAwesomeStyleSheets）は、ハンプトン・キャトリン[4]が設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。[6][7]後にSassファイルに用いられる単純なスクリプト言語であるSassScript 用の拡張が加えられた。
Sass はプリプロセッサとして実装されるスクリプト言語であり、Cascading Style Sheets (CSS)に変換され、解釈される。SassScript はスクリプト言語自体を示す。
SassScriptには2種類の構文がある。はじめにできた「インデント構文」は、Haml（英語版）と同様にコードブロックや改行コードを分離する際に字下げを使用する。単にSassと言ったらインデント構文のことを指す場合も多い。[8]新しい構文である「SCSS」（Sassy CSS）は、CSS同様にブロックを用いた書式を使用する。セミコロンと波括弧を用いて、一つのブロック内に複数のブロックを記述することができる。
CSS3はグループルールを適用するセレクタ及び擬似セレクターの一群で構成されている。SASSは伝統的なプログラミング言語、特にオブジェクト指向言語で利用可能ないくつかの仕組みで、CSS3にはないものを提供することでCSSを拡張している。SassScript の解釈時には、Sass ファイルで定義された様々なセレクタとして、CSSルールのブロックが作成される。Sass インタプリタがSassScript をCSSに変換する。sass かscss の保存時にSass がこれらを監視し、CSS出力変換を行っている。[9] CSS用の単純な糖衣構文でもある。
公式にRuby で実装されているオープンソースソフトウェアであるが、PHPを含めた多言語の実装も存在しており、中にはlibSass と呼ばれるC++による高性能の実装や、[10][11]JSass と呼ばれるJava による実装がある。[12]また、RubyによるSassが低速で、C++によるSassが新しい機能が追加しにくくなってきたことから、Dartによるdart-sassという実装が生まれた。[13][14]
インデント構文はメタ言語であり、SCSS はネストされたメタ言語であるように、プログラム意味論上では妥当なCSSは、妥当なSCSSである。Mozilla Firefox ウェブブラウザの拡張機能であるFirebug との統合に対応している。[15]
定義する変数は「$」（半角ドル記号）で始まり、代入に半角のコロン「:」が用いられる。[15]
数（単位を含む）、（引用符の有無にかかわらず）文字列、色（色名か指定記号）、ブーリアン型のデータ型に対応している。[15]
| Sass 構文 | SCSS 構文 | コンパイル結果 |
|---|---|---|
$blue:#3bbfce$margin:16px.content-navigationborder-color:$bluecolor:darken($blue,10%).borderpadding:$margin/2margin:$margin/2border-color:$blue | $blue:#3bbfce;$margin:16px;.content-navigation{border-color:$blue;color:darken($blue,10%);}.border{padding:$margin/2;margin:$margin/2;border-color:$blue;} | .content-navigation{border-color:#3bbfce;color:#2b9eab;}.border{padding:8px;margin:8px;border-color:#3bbfce;} |
CSSは論理的なネストに対応しているが、コードブロック自体はネストされていない。Sass により、ネストされたコードは互いに挿入できる。[8]
| SCSS 構文 | コンパイル結果 |
|---|---|
table.hl{margin:2em0;td.ln{text-align:right;}}li{font:{family:serif;weight:bold;size:1.3em;}} | table.hl{margin:2em0;}table.hltd.ln{text-align:right;}li{font-family:serif;font-weight:bold;font-size:1.3em;} |
名前空間のネストや親の参照を含むより複雑な種類は、公式文書で説明されている。[15]
CSSはミックスインに対応していないため、同じコードを別の位置に繰り返し記載する必要がある。ミックスインは、任意の妥当なSass コードを含むコード節を示し、実行されるたびに翻訳結果が呼び出し元の位置に挿入される。これにより効率的なコーディングや記述の簡略化だけでなく、内容変更を容易にする。[8]
| SCSS 構文 | コンパイル結果 |
|---|---|
@mixin table-base{th{text-align:center;font-weight:bold;}td,th{padding:2px}}#data{@include table-base;} | #datath{text-align:center;font-weight:bold;}#datatd,#datath{padding:2px;} |
@for、@each、@whileを用いてIDやClassに変数を適用できる。
| Sass 構文 | コンパイル結果 |
|---|---|
$squareCount:3@for$ifrom1through$squareCount#square-#{$i}background-color:redwidth:50px*$iheight:120px/$i | #square-1{background-color:red;width:50px;height:120px;}#square-2{background-color:red;width:100px;height:60px;}#square-3{background-color:red;width:150px;height:40px;} |
| Sass 構文 | コンパイル結果 |
|---|---|
@mixin left($dist){float:left;margin-left:$dist;}#data{@include left(10px);} | #data{float:left;margin-left:10px;} |
| SCSS 構文 | コンパイル結果 |
|---|---|
@mixin table-base{th{text-align:center;font-weight:bold;}td,th{padding:2px}}@mixin left($dist){float:left;margin-left:$dist;}#data{@include left(10px);@include table-base;} | #data{float:left;margin-left:10px;}#datath{text-align:center;font-weight:bold;}#datatd,#datath{padding:2px;} |
| SCSS 構文 | コンパイル結果 |
|---|---|
.error{border:1px#f00;background:#fdd;}.error.intrusion{font-size:1.3em;font-weight:bold;}.badError{@extend.error;border-width:3px;} | .error,.badError{border:1px#f00;background:#fdd;}.error.intrusion,.badError.intrusion{font-size:1.3em;font-weight:bold;}.badError{border-width:3px;} |
 | この項目は、ソフトウェアに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。 |