スタイルシートの構造
CSSと同様に、ほとんどのSassスタイルシートは主にプロパティ宣言を含むスタイルルールで構成されています。しかし、Sassスタイルシートには、これらと共に存在できる多くの機能があります。
ステートメントステートメントパーマリンク
Sassスタイルシートは、一連のステートメントで構成されており、それらは順に評価されて結果のCSSが構築されます。一部のステートメントには、{と}を使用して定義されたブロックが含まれており、他のステートメントが含まれています。たとえば、スタイルルールはブロックを含むステートメントです。そのブロックには、プロパティ宣言などの他のステートメントが含まれています。
SCSSでは、ステートメントはセミコロンで区切られます（ステートメントがブロックを使用する場合は省略可能です）。インデント構文では、改行で区切られます。
ユニバーサルステートメントユニバーサルステートメントパーマリンク
これらのタイプのステートメントは、Sassスタイルシートのどこにでも使用できます。
- 変数宣言、例：
$var: value。 - フロー制御アットルール、例：
@ifと@each。 @error、@warn、および@debugルール。
CSSステートメントCSSステートメントパーマリンク
これらのステートメントはCSSを生成します。@function内を除いてどこでも使用できます。
- スタイルルール、例：
h1 { /* ... */ }。 - CSSアットルール、例：
@mediaと@font-face。 - ミックスインの使用、
@includeを使用。 @at-rootルール。
トップレベルステートメントトップレベルステートメントパーマリンク
これらのステートメントは、スタイルシートのトップレベル、またはトップレベルのCSSステートメント内にネストしてのみ使用できます。
- モジュールの読み込み、
@useを使用。 - インポート、
@importを使用。 - ミックスインの定義、
@mixinを使用。 - 関数の定義、
@functionを使用。
その他のステートメントその他のステートメントパーマリンク
- プロパティ宣言、例：
width: 100pxは、スタイルルールと一部のCSSアットルール内でのみ使用できます。 @extendルールは、スタイルルール内でのみ使用できます。
式式パーマリンク
式とは、プロパティまたは変数宣言の右側に来るものです。各式は値を生成します。有効なCSSプロパティ値もSass式ですが、Sass式はプレーンなCSS値よりもはるかに強力です。Sass式は、ミックスインと関数への引数として渡され、@ifルールによる制御フローに使用され、算術演算を使用して操作されます。Sassの式構文をSassScriptと呼びます。
リテラルリテラルパーマリンク
最も単純な式は、静的な値を表します。
- 数値、単位が付いている場合と付いていない場合があります。例：
12または100px。 - 文字列、引用符が付いている場合と付いていない場合があります。例：
"Helvetica Neue"またはbold。 - カラー、16進数表現または名前で参照できます。例：
#c6538cまたはblue。 - ブール値リテラル
trueまたはfalse。 - シングルトン
null。 - 値のリスト、スペースまたはコンマで区切ることができ、角括弧で囲むことも、囲まないこともできます。例：
1.5em 1em 0 2em、Helvetica, Arial, sans-serif、または[col1-start]。 - マップ、値をキーに関連付けます。例：
("background": red, "foreground": pink)。
演算演算パーマリンク
Sassは、いくつかの演算の構文を定義しています。
==と!=は、2つの値が同じかどうかを確認するために使用されます。+、-、*、/、および%は、数値に対して通常の数学的な意味を持ち、科学的な数学における単位の使用と一致する単位に関する特別な動作があります。<、<=、>、および>=は、2つの数値が互いに大小関係にあるかどうかを確認します。and、or、およびnotは、通常のブール値の動作をします。Sassは、falseとnullを除くすべての値を「true」と見なします。+、-、および/を使用して、文字列を連結できます。(と)を使用して、演算の優先順位を明示的に制御できます。