3番目のメリットは変数が使えることです。ミックスイン(Mixin)同様、特に便利な機能のうちの一つです。他プログラミング言語ではお馴染みですが、変数を使用すると、値を一箇所で定義し、その値を後で再利用したり変更したりすることができます。例えば、あるサイトでメインで使用しているカラーがあったとします。そのカラーを変数にすることで、そのメインの色を変更したい時にその変数の値を変更すれば、一括で変更することが可能です。Sassで変数を宣言するには、$
(ドル記号)を変数名の前に付けます。
下記のように最初に変数を設定します。
$main-color: #FFFFFF;
その後、要素に対して、変数でコードを書きます。
.要素 {
color: $primary-color;
}
これで設定ができます。保守性に優れたコードを書くことが可能になります。