LoginSignup
0

More than 3 years have passed since last update.

posted at

updated at

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

はじめに

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

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

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

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

SassとSCSSとは?

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

ネストで書いてみよう

実際に↓のようなものを作ると
ex1.gif
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のなどは&を付けないと機能しないので注意が必要です!

変数を使ってみよう

FireShot Capture 506 - Sass(SCSS) - .png
この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)使ってくれたら嬉しいです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0