Sass 変数

Sass 変数

変数は、情報を保存する方法であり、後に繰り返し使用できます。

Sassを使用して、情報変数に保存されています、例えば：

• 文字列
• 数字
• 色
• ブール値
• リスト
• null

Sassは、変数を宣言する際に$シンボルを名前の後に使用します：

Sass変数の構文：

$variablename: value;

以下の例では、4つの変数が宣言されています：

• myFont
• myColor
• myFontSize
• myWidth

変数を宣言した後は、どこでもこれらの変数を使用できます：

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の変数は、定義されたネストレーションレベルでのみ利用可能です。

以下の例を見てください：

SCSS 文法：

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> タグ内のテキストの色は赤か緑ですか？赤です！

別の定義、$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」と名付けたファイルで定義し、以下を使用して @include このファイルを含むキーワード。