SCSSの記述をすっきりさせる方法 〜値の変数化〜

値の変数化

例えば

.submit-btn{
  color:#fff;
}

.send-btn{
  color:#fff;
}

のようにプロパティの値が同じ物があった場合に$変数名:値;とすることで値を変数化できる。

$btn-color:#fff;

.submit-btn{
  color:$btn-color;
}

.send-btn{
  color:$btn-color;
}

このように共通のプロパティを変数化することで今回の例で言えば、ボタンの色をまとめて管理することができるので
色の変更をまとめて行いたい場合にまとめて変数の値を変更するだけでまとめて変更することができます。

また変数の値をcalcを使って他の変数を用いて値を指定することもでき

//変数を使わない場合

.header{
  height:100px;
}

.main{
  height:calc(100vh - (100px - 90px);
}

.footer{
  height:90px;
}

//変数を使った場合

$header-height:100px;
$footer-height:90px;
$main-height:calc(100vh - (#{header-height} + #{footer-height:90px;}));

.header{
  height:$header-height;
}

.main{
  height:$main-height;
}

.footer{
  height:$footer-height;
}

とこんな風にも使える。どこか１箇所だけを変更して他も合わせるとなると変数を用いない場合変更箇所が多いが、
変数を用いることで変更箇所を最低限に抑えることができます。

こう言った変数を外部ファイルにまとめて、使う時は

@import "ディレクトリ/ファイル名"；

で使うscssファイルにインポートすることを忘れないように気をつけましょう。