まだCSS使ってるの？SCSS(Sass)を使ってみよう！【入門編】

はじめに

HTMLやCSSを少しでもかじった方ならわかると思いますが、CSSを書いているとき

• ネストで書けないかな？
• 変更するときに複数の箇所を変更するのが面倒...
• 使いまわしたいところがある
• コメントを/**/で囲むのが面倒...

こんなことを思ったことがありませんか？

実はこれらがSass(SCSS)で簡単に解決するのです！！

SassとSCSSとは？

SassとはSyntactically Awesome Stylesheetsの略です
自分でAwesome（すばらしい）と言うなんてすごい自信ですね（笑）
SassとSCSSの違いを簡単に言うとSassはインデント、SCSSはネストを使ってCSSを楽に書けるようにするものです
今回は私の使っているSCSSの方を紹介します

ネストで書いてみよう

実際に↓のようなものを作ると

CSSはこのようになります。

css

ul {
  width: 100px;
  background-color: #4d747e;
  padding: 20px;
  list-style: none;
}

ul li {
  font-size: 24px;
  color: #fff;
}

ul li.second {
  color: #e24350;
}

ul li:hover {
  background: #55c500;
}

ul ul li ul li.second　ul li:hoverのように同じものを何回も繰り返すの面倒に思いませんか？
それではSCSSを見てみましょう♪

scss

ul {
  width: 100px;
  background-color: #4d747e;
  padding: 20px;
  list-style: none;
  li {
    font-size: 24px;
    color: #fff;
    &.second {
      color: #e24350;
    }
    &:hover {
      background: #55c500;
    }
  }
}

このように繰り返しを減らすだけでなく、親子関係がわかるので非常に重宝します
ただし、SCSSでは&.second &:hoverのなどは&を付けないと機能しないので注意が必要です！

変数を使ってみよう

このCSSは普通に書いても簡単なのですが、

css

h1 {
  color: #e66317;
}
p {
  color: #e66317;
}

SCSSで書くとこんな感じになります。

scss

$text_color: #e66317;
h1 {
  color: $text_color;
}
p {
  color: $text_color;
}

これはかんたんな例なのであまり恩恵はありませんが、$text_colorの色を変えるだけで他の色を変えることができるということは後々10個とか変えないといけなくなったときに重宝します。

コメントを書いてみよう

/**/ではなくて//でコメントになるよ！（やったね！！）
っていうだけです（でも地味にありがたいんです）

最後に

SCSS（Sass）にはまだまだ便利な機能がたくさんあるのですが、今回はここらへんで終わりにします。
これを見てSCSS（Sass）使ってくれたら嬉しいです！