SASSの変数

SASS言語は変数の使用を可能にします。 変数は、データを格納し、コードの必要な場所でそれらを使用できるコンテナです。

変数を作成するには、その名前を考え、その前に$記号を置きます。 次に、変数名の後にコロンを置き、その変数の値を指定します。 例として、varという名前の変数を作成してみましょう：

styles.scss$var: 20px;

では、この変数をプロパティの値として使用してみましょう：

styles.scssp {
  font-size: $var;
}

結果として、コンパイル後、CSSでは変数の代わりにその値が代入されます：

styles.cssp {
  font-size: 20px;
}

styles.scss$color: #000;

p {
  color: $color;
}