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