LESSにおける変数

LESS言語では、変数を使用することができます。 変数は、何らかのデータを格納し、コード内の必要な場所で使用できるコンテナのようなものです。

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

styles.less@var: 20px;

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

styles.lessp {
  font-size: @var;
}

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

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

styles.less@color: #000;

p {
  color: @color;
}