Sass 補間、アノテーション、数値型、文字列、値型_html/css_WEB-ITnose

Interpolation#{}
CSS プリプロセッサ言語を使用する主な理由の 1 つは、Sass を使用してより優れた構造システムを取得することです。よりクリーンで効率的なオブジェクト指向の CSS を作成したいとします。 Sass における補間は重要な部分です。例:

1 $properties: (margin, padding);2  @mixin set-value($side, $value) {3         @each $prop in $properties {4  #{$prop}-#{$side}: $value;5  }6 }7 .login-box {8  @include set-value(top, 14px);9 }

これにより、変数とプロパティが完全に機能します。上記のコードは CSS にコンパイルされます:

1 .login-box {2  margin-top: 14px;3  padding-top: 14px;4 }

プロパティ値を設定する場合は、文字列の挿入を使用できます。もう 1 つの便利な使用法は、セレクターを構築することです。次のように使用できます:

1 @mixin generate-sizes($class, $small, $medium, $big) {2  .#{$class}-small { font-size: $small; }3  .#{$class}-medium { font-size: $medium; }4  .#{$class}-big { font-size: $big; }5 }6 @include generate-sizes("header-text", 12px, 20px, 40px);

コンパイルされた CSS:

1 .header-text-small { font-size: 12px; }2 .header-text-medium { font-size: 20px; }3 .header-text-big { font-size: 40px; }

#{} 構文はどこでも利用できるわけではなく、mixin で呼び出すこともできません
@extend で補間を使用できます。

 1 %updated-status { 2  margin-top: 20px; 3  background: #F00; 4 } 5 .selected-status { 6  font-weight: bold; 7 } 8 $flag: "status"; 9 .navigation {10  @extend %updated-#{$flag};11  @extend .selected-#{$flag};12 }

上記の Sass コードは実行可能であり、.class と %placeholder を動的に挿入できます。 mixin のようなパラメーターは受け入れられません。上記のコードでコンパイルされた CSS:

1 .navigation {2  margin-top: 20px;3  background: #F00;4 }5 .selected-status, .navigation {6  font-weight: bold;7 }

注釈
Sass で注釈を付けるには 2 つの方法があります:
1. CSS のような注釈メソッドを使用します。先頭に「/*」、末尾に「*/」
2. JavaScriptのコメントメソッドと同様に、「//」を使用します
両者の違いは、前者はコンパイルされたファイルに表示されることです。 CSS、後者はコンパイルされた CSS には表示されません

データ型

SassScript は 6 つの主要なデータ型をサポートします:

Number (1.2、1 など) 3、10ピクセル)

引用符の有無にかかわらずテキスト文字列 (例: "foo"、'bar'、baz)

色 (例: blue、#04a3f9、rgba(255, 0, 0, 0.5))

ブール値 (例: true、false)

空の値 (例: null)

スペースまたはカンマで区切られた値のリスト (例: 1.5em 1em 0 2em、Helvetica、Arial、sans-serif)

SassScript は他のすべての CSS プロパティ値もサポートしますUnicode 範囲や !重要なステートメントなどのタイプ。 ただし、これらの型に対して特別な処理は行いません。 これらは引用符で囲まれていない文字列としてのみ扱われます。

String

CSS は 2 種類の文字列を提供します:

"Lucida Grande" や 'http://sass-lang.com' などの引用符付き文字列 ; 、サンセリフや太字など。

CSS ファイルのコンパイル時にそのタイプを変更しません。例外が 1 つだけあります。 #{ } 補間を使用する場合、引用符で囲まれた文字列は引用符で囲まれていない文字列にコンパイルされ、ミックスイン内でセレクター名を引用しやすくなります。

1 @mixin firefox-message($selector) {2  body.firefox #{$selector}:before {3  content: "Hi, Firefox users!";4     }5 }6 @include firefox-message(".header");

は次のようにコンパイルされます:

1 body.firefox .header:before {2  content: "Hi, Firefox users!"; 3 }

value list いわゆる値リスト (リスト) は、Sass が CSS を処理する方法を指します: margin: 10px 5px 0 0 または: font- face: Helvetica、Arial、sans-serif
上記のようにスペースまたはカンマで区切られた一連の値。

実際、独立した値も値リスト、つまり値を 1 つだけ含む値のリストとみなされます。

Sass リスト関数は、値リストにさらに多くの関数を提供します:

nth 関数 (n 番目の関数) は、値リスト内の項目に直接アクセスできます。
join 関数 (join 関数) は、複数の値リストをリンクできます。
2. append 関数は値リストに値を追加できます。
3. @each ルール (@each ルール) は値リストの各項目にスタイルを追加できます。
値リストには、別の値リストを含めることができます。たとえば、1px 2px、5px 6px は、1px 2px と 5px 6px の 2 つの値リストを含む値リストです。内側と外側の値リストが同じ分離方法を使用する場合、内側のレイヤーを括弧で囲む必要があるため、(1px 2px) (5px 6px) と記述することもできます。値のリストが CSS にコンパイルされるとき、CSS では括弧が許可されていないため、Sass は括弧を追加しません。 (1px 2px) (5px 6px) と 1px 2px 5px 6px は、コンパイルされた CSS ファイルでは同じですが、Sass ファイルでは意味が異なります。前者は 2 つの値リストを含む値リストであり、後者は A 値リストです。 4 つの値が含まれます。

() を使用して、CSS に直接コンパイルできない空のリストを表すことができます。たとえば、font-family: () をコンパイルすると、Sass はエラーを報告します。値リストに空の値リストまたは null 値が含まれている場合、1px 2px () 3px や 1px 2px null 3px など、null 値はコンパイル中にクリアされます。