Sassで出来ること【vol.2】入れ子(ネスト)・変数

Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

入れ子(ネスト)

scssでは要素を入れ子にすることが出来ます！
cssでこんなファイルがあるとします。

.css

.main-nav{
   display: flex;
   font-size: 1.5rem;
   text-transform: uppercase;
   list-style: none;
}
.main-nav li{
   margin-left: 30px;
}
.main-nav a{
   color: #000;
   display: inline-block;
   position: relative;
   text-decoration: none;
}

全く同じ内容をscssではこのように書くことが出来ます！

.scss

.main-nav{
   display: flex;
   font-size: 1.5rem;
   text-transform: uppercase;
   list-style: none;
   li{
      margin-left: 30px;
   }
   a{
      color: #000;
      display: inline-block;
      position: relative;
      text-decoration: none;
   }
}

一見そんなに変わらないのですが
例えば「.main-nav」の名前を変更する必要が出た際に記述し直す部分が一カ所だけになり、
メンテナンスやコードの再利用がとても楽になります。

プロパティのネスト

プロパティも入れ子にすることが出来ます。

.scss

p {
   margin-top: 10px;
   font:{
      color: #432;
      size: 15px;
   }  
}

コンパイルするとこの様になります。

変換後のcss

p {
   margin-top: 10px;
   font-color: #432;
   font-size: 15px;
}

これは普通に書いた方が分かりやすそうです。
scssでは入れ子に出来ますが、しなくても生成されるcssファイルは変わらないという点がすばらしいと思います。
他の出来ることについてもそうなのですが、都合の良い時だけ拡張機能を使えるイメージです。

変数

なんと、変数を使用することが出来ます！

変数の名前は$から始め、「：」で区切ります。
上から２行が変数宣言です。

.scss

$text_color: #333;
$top_margin: 20px;
p {
   font-color: $text_color;
   margin-top: $top_margin;
}
h1 {
   font-color: $text_color;
   margin-top: $top_margin;
}

コンパイルするとこの様になります。

変換後のcss

p {
   font-color: #333;
   margin-top: 20px;
}
h1 {
   font-color: #333;
   margin-top: 20px;
}

色やサイズ等、繰り返し使う値を宣言するととても便利です。
「ここの色、変更し忘れた！」とか「あの時使った色何だっけ？」と記述を探す時間が大幅に減りました。

リンク

Sassで出来ること【vol.1】Sassとは？
Sassで出来ること【vol.2】入れ子(ネスト)・変数
Sassで出来ること【vol.3】関数
Sassで出来ること【vol.4】継承
Sassで出来ること【vol.5】mixin(ミックスイン)