【アウトプット㊷】-Sass- 変数の基本

変数とは

あらかじめ好きな名前を決めて値を定義しておくことで、任意の場所で変数名を参照して、値を呼び出すことができる。
例えば同じ色を複数の場所で指定することが多いが、色が覚えにくいと毎回コピーしてくる必要があるので手間がかかる。。デザインデータ側も同じ色のはずがケアレスミスなどで微妙に色がずれている場合もあるので、似たような違う色が増えてしまう可能性もある。。このような問題も変数を使えば好きな場所で参照することができる！

//色を宣言
$red: #cf2d3a;

.notes {
    color: $red;
}    

{}内で変数を宣言する

.notes {
    $value: 15px;
    margin-left: $value;
}  

スコープが決まっているため、｛｝内でしか参照することができない。

変数名に使用できない文字

$5width: 10px;
→数字から始まっているためNG

$@width: 10px;
→@など使用できない記号のためNG

$--width: 10px;
→連続したハイフンから始まっているためNG