Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@hideo_taniguchi

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ファイルにインポートすることを忘れないように気をつけましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?