sass
変数

構文

• $ variable_name ： value ;

サス

変数は一度値を格納するために使用され、Sassドキュメント全体で複数回使用されます。

それらは主にフォントや色などの制御に使用されますが、任意のプロパティの任意の値に使用できます。

Sassは何かを変数にするために$記号を使います。

$font-stack: Helvetica, sans-serif
$primary-color: #000000

body
  font-family: $font-stack
  color: $primary-color

SCSS

Sassの場合と同様に、SCSS変数は、SCSSドキュメント全体で複数回使用される値を格納するために使用されます。

変数は、頻繁に使用されるプロパティ値（フォントや色など）を格納するために使用されますが、プロパティの任意の値に使用できます。

SCSSは$記号を使用して変数を宣言します。

$font-stack: Helvetica, sans-serif;
$primary-color: #000000;

body {
  font-family: $font-stack;
  color: $primary-color;
}

変数をまだ宣言していない場合にのみ、この変数に新しい値を代入したい場合は、変数を宣言するときに!defaultを使用することができます：

$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green;        // And now it's green.

可変スコープ

変数は、JavaScriptのように特定のスコープ内に存在します。

変数をブロック外に宣言すると、シート全体で変数を使用できます。

$blue: dodgerblue;

.main {
    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue;
}

ブロック内で変数を宣言すると、そのブロック内でのみ変数を使用できます。

.main {
    $blue: dodgerblue;

    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue; // throws a variable not defined error in SASS compiler
}

シートレベルで宣言された変数（ブロック外）は、 インポートされた場合に他のシートでも使用できます。

@ at-rootディレクティブで変数をローカライズする

@ at-rootディレクティブを使用して変数をローカライズすることができます。

$color: blue;

@at-root {
  $color: red;

  .a {
    color: $color;
  }
  .b {
    color: $color;
  }
}

.c {
  color: $color;
}

コンパイルされる：

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

補間

変数は文字列の補間に使用できます。これにより、セレクタ、プロパティ、および値を動的に生成することができます。そのような変数を行うための構文は#{$variable}です。

$className: widget;
$content: 'a widget';
$prop: content;

.#{$className}-class {
  #{content}: 'This is #{$content}';
}
// Compiles to

.widget-class {
  content: "This is a widget";
}

ただし、ミックスインや関数の名前を動的に生成するために使用することはできません。

SCSSの変数

SCSS変数では、 $ signで始まり、CSSプロパティのように設定されます。

$label-color: #eee;

それらは、定義されている入れ子のセレクタ内でのみ使用できます。

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

入れ子になったセレクタの外側で定義されている場合は、どこでも使用できます。

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

!globalフラグで定義することもできます。この場合、すべての場所で使用できます。

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

変数名にはハイフンとアンダースコアを区別なく使用できることに注意することが重要です。たとえば、 $label-widthという変数を定義すると、 $label_widthとしてアクセスすることができ、その逆も可能です。