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;
}
とこんな風にも使える。どこか1箇所だけを変更して他も合わせるとなると変数を用いない場合変更箇所が多いが、
変数を用いることで変更箇所を最低限に抑えることができます。
こう言った変数を外部ファイルにまとめて、使う時は
@import "ディレクトリ/ファイル名";
で使うscssファイルにインポートすることを忘れないように気をつけましょう。
Author And Source
この問題について(SCSSの記述をすっきりさせる方法 〜値の変数化〜), 我々は、より多くの情報をここで見つけました https://qiita.com/hideo_taniguchi/items/18b1b55e04b8066ffc18著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .