この記事はSCSS環境構築まとめの続きという位置づけで書いています。

子孫セレクタのネスト

SCSSでは子孫セレクタをネストして書くことができます。
CSSの場合

style.css

nav ul {
  background-color: #f00;
}

nav li {
  color: #ff0;
}

SCSSの場合

style.scss

nav {
  ul {
    background-color: #f00;
    }

  li {
    color: #ff0;
    }
}

このようにネストしてまとめて書くことができるので、親子関係がわかりやすくなります。

子セレクタ、隣接セレクタのネスト

子セレクタや隣接セレクタのみをネストしたい場合もあります。
CSSの場合

style.css

ul {
  background-color: #ff0;
  }

ul>li {
  color: #f00;
  }

SCSSの場合

style.scss

ul {
  background-color: #ff0;
  >li {
    color: #f00;
    }
  }

このように、子セレクタの頭に>を付けるだけで、子セレクタ扱いになります。
隣接セレクタの場合は、>の代わりに+です。

疑似クラス、疑似要素のネスト

疑似クラスや疑似要素もSCSSではネストして書くことができます。
CSSの場合

style.css

.save-btn {
  background-color: #000;
  }

.save-btn:hover {
  background-color: #f00;
  }

SCSSの場合

style.scss

.save-btn {
  background-color: #000;
  &:hover {
    background-color: #f00;
    }
  }

上のように、ホバー時やクリック時、:beforeや:afterなどもすべてネストして記述することができます。

プロパティのネスト

一部のプロパティもネストすることができます。
CSSの場合

style.css

.box {
  font-color: #000;
  font-weight: "bold";
  }

SCSSの場合

style.scss

.box {
  font: {
    color: #000;
    weight: "bold";
    }
  }

このように、font-colorとfont-weight、background-colorとbackground-imageなどの初めの単語が同じプロパティはネストして書くことができます。

メディアクエリのネスト

メディアクエリもネストすることができます。
CSSの場合

style.css

div {
  margin: 0 10px;
  }

@media(max-width: 670px) {
  div {
    margin: 0;
  }
}

SCSSの場合

style.scss

div {
  margin: 0 10px;
  @media(max-width: 670px) {
    margin: 0;
  }
}

このように、メディアクエリをネストすることで一目で画面幅とその時に適用させたいCSSを見比べることができます。

変数

SCSSでは色などを変数に格納して開発を効率化できます~~(CSSでも似たようなことはできますが)~~。
CSSの場合

style.css

.style1 {
  background-color: #f00;
}
.style2 {
  background-color: #f00;
}
.style3 {
  background-color: #f00;
}

#f00がメインカラーであるとします。
もしメインカラーが#ff0に変更になると、#f00と指定してある場所はすべて変更することになります。
これを解決するのが変数です。

SCSSの場合

style.scss

$main-color: #f00;

.style1 {
 background-color: $main-color;
}
.style2 {
 background-color: $main-color;
}
.style3 {
 background-color: $main-color;
}

値を変数に格納するには、上のように$変数名: 値;のように書きます。
変数を使う利点は、値に変更が生じたときに変数を定義している部分だけ書き換えればすべての値を変更できる点です。

演算

Sassでは値の演算もできます。~~(これもCSSでも似たようなことが可能です)~~
CSSの場合
横1920px,縦1042pxの画像を使用している想定です。

style.css

.main-img {
  width: 100vw;
  height: 54vw;  /*≒1042÷1920×100vw*/
  }

このように自分の手で計算してからサイズを指定する必要があります。
SCSSの場合

style.scss

.main-img {
  width: 100vw;
  height: 1042/1920*100vw;
  }

このように直接計算記号を使うことができるので、計算する手間を省くことができます。
単位の違う値でも計算することができるので、かなり便利です。

関数

SCSSには関数も用意されています。

lighten、darken

style.scss

color: lighten(#fff000, 30%); /*#fff000を30%明るくする*/
color: darken(#fff000, 40%);  /*#fff000を40%暗くする*/

↓ これが

style.css

color: #fff999;
color: #333000;

こうなる。
このように、lighten関数やdarken関数に色と割合を渡すと、渡した色を渡した割合だけ明るくしたり暗くしたりすることができます。

round

style.scss

height: round(1042/1920*100vw);

↓これが

style.css

height: 54vw;

こうなる。

round関数は、入力した値を四捨五入してくれます。

他にも様々な関数がありますが、長くなるうえ、頻繁に使うものでもないのでここでは省略します。

コンポーネント

SCSSでは、ファイルをコンポーネントごとなどで分割して管理することで、保守性を高めることができます。
コンポーネントで分けたファイルを読み込むには、

style.scss

@import "button";

_button.scss

button {
  width: 20px;
  height: 10px;
}

.blue-btn {
  background-color: blue;
}

この時、"button"を定義するファイル名の頭にはアンダースコア_を入れる必要があります。

継承

SCSSでは、スタイルを継承してコードを短くする仕組みもあります。
CSSの場合

style.css

.btn {
  width: 50px;
  height: 20px;
  }

.blue-btn {
  width: 50px;
  height: 20px;
  background-color:  blue;
}

CSSで書くと、このように同じスタイルを何度も書く必要が出てくる時があります。

SCSSの場合

style.scss

.btn {
  width: 50px;
  height: 20px;
  }

.blue-btn {
  @extend .btn;
  background-color: blue;
  }

SCSSを使うと、このように共通のスタイルは@extendを使うことで省略することができます。

まとめ

ミックスインなどの機能もありますが、一部の機能は記事の長さと私自身がいまいち理解できていないという面から省略しています。
もし興味があったらリファレンス等で調べてみてください。
SCSSを使うと、コードの省略や分割の面でかなり有利になります。
SCSS便利なのでどんどん使っていきましょう!!