Sass（スタイルシート言語）

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

YAMLとHaml（インデント構文）

レス（SCSS）
影響を受けた
Less、Stylus、Tritium、Bootstrap (v4+)

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

Sassは2つの構文で構成されています。「インデント構文」と呼ばれるオリジナルの構文は、Hamlに似た構文です。[2] [3]インデントはコードブロックを区切り、改行文字はルールを区切るために使用します。新しい構文であるSCSS（Sassy CSS）は、CSSのようなブロックフォーマットを使用します。SCSSでは、コードブロックを示すために中括弧を使用し、ブロック内のルールを区切るためにセミコロンを使用します。インデント構文ファイルと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本体に統合された開発者ツールに取って代わられたため、Firebugは非推奨となりました。Firefox 57でXUL拡張機能のサポートが廃止されて以降、Firebugは動作しなくなりました。

特徴

変数

Sassでは変数を定義できます。変数はドル記号（$）で始まります。変数の代入はコロン（ ）で行います:。[18]

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

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

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

SCSSサスコンパイルされたCSS
$primary-color : #3bbfce ; $margin : 16 px ;  .content-navigation { border-color : $ primary-color ; color : darken ( $ primary-color , 10 % ) ; }      .border { padding : $ margin / 2 ; margin : $ margin / 2 ; border-color : $ primary-color ; }           
$primary-color : #3bbfce $margin : 16 px  .content-navigation境界線の色: $primary-color色:暗くする( $primary-color , 10 % )     .borderパディング: $margin / 2マージン: $margin / 2ボーダーカラー: $primary-color      
:ルート{ --primary-color : #3bbfce ; --secondary-color : #2b9eab ; --margin : 8 px ; }   .content -navigation { border-color : var ( --secondary-color ) color : var ( --secondary-color ); }     . border { padding : 8 px ; margin : var ( --margin ); border-color : #3bbfce ; }

ネスティング

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

SCSSサスコンパイルされたCSS
表.hl {余白: 2em 0 ; td .ln {テキスト配置:右; } }         li {フォント: {ファミリー: serif ;太さ:太字;サイズ: 1.3em ; } }          
表.hl余白: 2 em 0 td .lnテキスト配置:右liフォント:ファミリー: serif太さ:太字サイズ: 1 .3 em                  
table .hl { margin : 2 em 0 ; } table .hl td .ln { text - align : right ; }​        li {フォントファミリー: serif ;フォントの太さ:太字;フォントサイズ: 1.3 em ; }

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

SCSSサスコンパイルされたCSS
@mixinテーブルベース{ th {テキスト配置: center ;フォントの太さ: bold ; } td , th {パディング: 2px ; } }              #data { @includeテーブルベース; }  
=table-base th text-align : center font-weight : bold td , th padding : 2 px         #データ+テーブルベース 
#データth { text-align : center ; font-weight : bold ; } #データtd , #データth { padding : 2 px ; }

ループ

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

サスコンパイルされたCSS
$squareCount : 4 @for $iから1から$squareCount #square- #{ $i }背景色:赤幅: 50 px * $i高さ: 120 px / $i                   
# square-1 {背景色:赤;幅: 50ピクセル;高さ: 120ピクセル; }       # square-2 {背景色:赤;幅: 100ピクセル;高さ: 60ピクセル; }       # square-3 {背景色:赤;幅: 150ピクセル;高さ: 40ピクセル; }

議論

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

サスコンパイルされたCSS
=left ( $dist ) float :左margin-left : $dist     #データ+左( 10ピクセル)  
#データ{ float : left ; margin-left : 10 px ; }

組み合わせて

サスコンパイルされたCSS
=table-base th text-align : center font-weight : bold td , th padding : 2 px          =left ( $dist ) float :左margin-left : $dist     #データ+左( 10 px ) +テーブルベース   
# data { float : left ; margin-left : 10 px ; } # data th { text-align : center ; font-weight : bold ; } # data td , # data th { padding : 2 px ; }

セレクタの継承

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

サスコンパイルされたCSS
.error境界線: 1 px #f00背景: #fdd     .error.intrusionフォントサイズ: 1.3 emフォントの太さ:太字     .badError @extend .error境界線の幅: 3 px     
.error 、.badError { border : 1 px # f00 ; background : #fdd ; }​       . error . intrusion 、. badError . intrusion { font-size : 1.3 em ; font-weight : bold ; }     . badError {境界線の幅: 3 px ; }

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

libSass

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

キャトリン氏によると、libSassは「何にでもドロップすればSassが組み込まれます。…今日からFirefoxにドロップしてFirefoxをビルドすれば、そこでコンパイルされます。私たちはそれを可能にするために、独自のパーサーを一から書きました。」[22]

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

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

IDE統合

SassのIDE統合
IDEソフトウェア
Adobe Dreamweaver CC 2017
日食
エマックサスモード
JetBrains IntelliJ IDEA（アルティメットエディション）
ジェットブレインズ PhpStorm
ジェットブレインズ RubyMine
ジェットブレインズ WebStorm
マイクロソフトビジュアルスタジオマインドスケープ
マイクロソフトビジュアルスタジオサッシースタジオ
マイクロソフト WebMatrix
ネットビーンズ
ヴィムハムル.zip
原子
ビジュアルスタジオコード
崇高な
編集+

参照

参考文献

  1. ^ ab 「Dart Sass - 最新リリース」。github.com。
  2. ^ abcdef Media Mark (3.2.12). 「Sass - 構文的に優れたスタイルシート」. Sass-lang.com . 2014年2月23日閲覧。{{cite web}}: CS1 maint: numeric names: authors list (link)
  3. ^ ab Firtman, Maximiliano (2013-03-15). モバイルWebプログラミング. O'Reilly Media, Inc. ISBN 978-1-4493-3497-0。
  4. ^ Libby, Alex (2019). 『Dart Sass入門：Dartを基盤としたSass代替の実践的入門』バークレー、カリフォルニア州: Apress. doi :10.1007/978-1-4842-4372-5. ISBN 978-1-4842-4371-8。
  5. ^ Sass - 構文的に素晴らしいスタイルシート 2013年10月9日アーカイブWayback Machineチュートリアル
  6. ^ 「Sass: 構文的に素晴らしいスタイルシート」sass-lang.com . 2013年9月1日時点のオリジナルよりアーカイブ。
  7. ^ “Natalie Weizenbaum's blog”. 2007年10月11日時点のオリジナルよりアーカイブ。
  8. ^ abc "Sass / Scss". Drupal.org. 2009年10月21日. 2016年3月10日時点のオリジナルよりアーカイブ。 2014年2月23日閲覧。
  9. ^ "sass". www.npmjs.com .
  10. ^ "sass埋め込み". www.npmjs.com .
  11. ^ Weizenbaum, Natalie. 「Ruby Sassのサポート終了 « Sass Blog」. sass.logdown.com . 2019年4月21日閲覧。
  12. ^ “Sass: Ruby Sass”. sass-lang.com . 2019年4月21日閲覧。
  13. ^ 「LibSassは非推奨です」。sass -lang.com。2020年10月26日。
  14. ^ "node-sass". www.npmjs.com .
  15. ^ 「jsass - SassコンパイラのJava実装（およびその他の便利な機能）。 - Googleプロジェクトホスティング」 。 2014年2月23日閲覧。
  16. ^ 「JSassドキュメント」。jsass.readthedocs.io。
  17. ^ “SassCompiler (Vaadin 7.0.7 API)”. Vaadin.com. 2013年6月6日. 2014年4月21日時点のオリジナルよりアーカイブ。 2014年2月23日閲覧。
  18. ^ abcde Sass (構文的に素晴らしいスタイルシート) SASS_REFERENCE
  19. ^ モジュール: Sass::Script::Functions Sass関数
  20. ^ H. Catlin (2012年10月15日). 「Hamptonのモバイルデザインの6つのルール」. HTML5 Developer Conference. 2021年12月15日時点のオリジナルよりアーカイブ。 2013年7月11日閲覧。
  21. ^ ab M. Catlin (2012-04-30). "libsass". Moovweb Blog. 2013年5月8日時点のオリジナルよりアーカイブ。 2013年7月11日閲覧。
  22. ^ A. Stacoviak & A. Thorp (2013年6月26日). 「Sass、libsass、Haml、そしてHampton Catlinでもっと活用」. 2013年8月6日時点のオリジナルよりアーカイブ。2013年7月30日閲覧。
  23. ^ D. Le Nouaille (2013年6月7日). 「SasscとBourbon」 . 2013年7月11日閲覧。
  24. ^ “Sass互換性”. sass-compatibility.github.io . 2019年12月5日時点のオリジナルよりアーカイブ。2019年11月29日閲覧。

さらに読む

  • 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.
  • セダーホルム、ダン (2013). Sass for Web Designers (PDF) . A Book Apart. ISBN 978-1-937557-13-3。
  • ワッツ、ルーク (2016). 『Mastering Sass』. Packt Publishing.
  • 公式サイト
Retrieved from "https://en.wikipedia.org/w/index.php?title=Sass_(style_sheet_language)&oldid=1304955910"