Sass 変数、nested_html/css_WEB-ITnose

変数を宣言する
変数を定義するための構文
Sass 変数には 3 つの部分が含まれます:
変数を宣言するための記号「$」
変数名
変数に代入される値
の色を想定した簡単な例ボタンに対していくつかの変数を宣言できます:

1 $brand-primary : darken(#428bca, 6.5%) !default;/* #337ab7*/2 $btn-primary-color : #fff !default;3 $btn-primary-bg : $brand-primary !default;4 $btn-primary-border : darken($btn-primary-bg, 5%) !default;5 /*如果值后面加上!default则表示默认值。*/

通常の変数とデフォルト変数
通常の変数
は定義後にグローバルスコープで使用できます

1 $fontSize: 12px;2 body{3  font-size:$fontSize;4 }

コンパイルされた CSS コード:

1 body{2  font-size:12px;3 }

デフォルト変数
sass のデフォルト変数は、値の後に !default を追加するだけです。

1 $baseLineHeight:1.5 !default;2 body{3  line-height: $baseLineHeight;4 }

コンパイルされた CSS コード:

1 body{2  line-height：1.5;3 }

通常、sass のデフォルト変数はデフォルト値を設定し、必要に応じて上書きするために使用されます。上書きする方法も非常に簡単です。デフォルト変数の前に宣言してください。変数をダウンロードするだけです。

1 $baseLineHeight: 2;2 $baseLineHeight: 1.5 !default;3 body{4  line-height: $baseLineHeight; 5 }

コンパイルされた CSS コード:

1 body{2  line-height:2;3 }

コンパイルされた行の高さがデフォルトの 1.5 ではなく 2 になっていることがわかります。デフォルト変数の値は、コンポーネント開発を行うときに非常に役立ちます。

ローカル変数とグローバル変数
同じ名前のグローバル変数がすでに存在する場合、バージョン 3.4 以降、Sass はすでにスコープの概念を正しく処理し、代わりに新しいローカル変数を作成できます。
グローバル変数とローカル変数

 1 /*SCSS*/ 2 $color: orange !default;/*定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)*/ 3 .block { 4  color: $color;//调用全局变量 5 } 6 em { 7  $color: red;//定义局部变量 8  a { 9  color: $color;//调用局部变量10     }11 }12 span {13  color: $color;//调用全局变量14 }

css 結果:

 1 /*CSS*/ 2 .block { 3  color: orange; 4 } 5 em a { 6  color: red; 7 } 8 span { 9  color: orange;10 }

要素内で定義された変数は、他の要素に影響を与えません。次のコードに示すように、グローバル変数 は要素の外部で定義された変数であることが簡単に理解できます。

$color:orange !default;

$color はグローバル変数ですが、$color:red などの要素の内部で定義された変数です。はローカル変数です。
グローバル変数のシャドウ
グローバル スコープに既に存在する変数がローカル スコープ (セレクター内、関数内、ミックスイン内など) で宣言されると、ローカル変数は グローバル変数のシャドウになります。変数。基本的に、ローカル変数はローカル スコープ内のグローバル変数のみをオーバーライドします。
上記の例の em セレクター内の変数 $color は、グローバル変数のシャドウです。

 1 /*SCSS*/ 2 $color: orange !default;//定义全局变量 3 .block { 4  color: $color;//调用全局变量 5 } 6 em { 7  $color: red;//定义局部变量（全局变量 $color 的影子） 8  a { 9  color: $color;//调用局部变量10     }11 }

変数をいつ宣言するか?
推奨事項: 必要だと思われる場合にのみ変数を作成してください。ハックのためだけに新しい変数を宣言しないでください。何も効果がありません。新しい変数は、次の条件がすべて満たされた場合にのみ作成できます:
1. 値が少なくとも 2 回繰り返し出現する;
2. 値は少なくとも 1 回更新される可能性がある;
3. 値のすべてのパフォーマンスは変数に関連する。 （一致しません）。
4. 基本的に、更新する必要がない変数、または 1 か所でのみ使用される変数を宣言する理由はありません。

ネスト - セレクターのネスト
Sass はセレクターのネスト機能も提供しますが、これは Sass でのネストが制御できないという意味ではありません。ネストするため、レベルが深くなるほど、コンパイルされた CSS のセレクター レベルも深くなります。
Sassのネスティングは3種類に分かれます:
セレクターのネスティング
属性のネスティング

1.セレクターのネスト 次のような構造があるとします。ヘッダーの a タグを選択したい場合、CSS を記述するときは次のように記述します。

1 <header>2     <nav>3         <a href=“##”>Home</a>4         <a href=“##”>About</a>5         <a href=“##”>Blog</a>6     </nav>7 <header>

次に、Sass では、セレクターのネストを使用できます。

ネスト - 属性のネスト

Sass は属性のネストも提供します。CSS には同じプレフィックスを持つ異なるサフィックスを持つ属性がいくつかあります。たとえば、border-top/border-Right、これと同様に、margin、padding、などの属性があります。そしてフォント。

例:

re re re re

は SASS で次のように記述できます:

擬似ネストと属性ネスト「&」記号と一緒に使用する必要があります。
古典的な「clearfix」を例に挙げます:

1 nav a {2  color:red;3 }4 header nav a {5  color:green;6 }

コンパイルされた CSS:

1 nav {2  a {3  color: red;4 5  header & {6  color:green;7         }8  } 9 }

セレクターのネストを避ける:
セレクターのネストに関する最大の問題は、最終的なコードが読みにくくなることです。開発者は、さまざまなインデント レベルでのセレクターの特定のパフォーマンス効果を計算するために多大な労力を費やす必要があります。
セレクターが具体的であればあるほど、宣言ステートメントはより冗長になり、最も近いセレクターへの参照 (&) がより頻繁に行われます。ある時点で、セレクター パスを混乱させたり、次のレベルのセレクターを探索したりすることによる高いエラー率は、まったく価値がありません。
そのような状況を防ぐために、セレクターのネストをできるだけ避ける必要があります。ただし、この措置に対応できるケースは明らかに少数です。