Help us understand the problem. What is going on with this article?

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

hideo_taniguchi
未経験からプログラマーへ転職するためにteck::expertにて学習中です。 アウトプットに間違いがございましたらガンガンご指摘お願いしますね^ ^
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした