Sass 変数
Sass 変数
変数は、後で再利用できる情報を保存する方法です。
Sass を使用すると、次のような情報を変数に保存できます。
- 文字列
- 数字
- 色
- ブール値
- リスト
- ヌル
Sass は、$ 記号の後に名前を付けて変数を宣言します。
Sass 変数の構文:
$variablename: value;
次の例では、myFont、myColor、myFontSize、myWidth という名前の 4 つの変数を宣言しています。変数を宣言した後は、必要な場所で変数を使用できます。
SCSS 構文:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
そのため、Sass ファイルがトランスパイルされると、次のように変数 (myFont、myColor など) が取得され、CSS 内に配置された変数値を含む通常の CSS が出力されます。
CSS 出力:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Sass 変数のスコープ
Sass 変数は、それが定義されているネストのレベルでのみ使用できます。
次の例を見てください。
内のテキストの色は変わりますか?<p>タグは赤ですか緑ですか？赤くなるよ！
もう 1 つの定義 $myColor: green;の中にあります<h1>ルールがあり、そこでのみ利用可能になります！
したがって、CSS 出力は次のようになります。
CSS 出力:
h1 {
color: green;
}
p {
color: red;
}
これが変数スコープのデフォルトの動作です。
Sass !global の使用
変数スコープのデフォルトの動作は、!globalスイッチ。
!global変数がグローバルであることを示します。これは、変数がすべてのレベルでアクセスできることを意味します。
次の例を見てください (上記と同じですが、!global追加した）：
SCSS 構文:
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
内側のテキストの色は<p>タグは緑色になります！
したがって、CSS 出力は次のようになります。
CSS 出力:
h1 {
color: green;
}
p {
color: green;
}
ヒント：グローバル変数はルールの外で定義する必要があります。すべてのグローバル変数を「_globals.scss」という名前の独自のファイルで定義し、そのファイルを@含むキーワード。