Sassでよく使う機能を5つ厳選して徹底解説！

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！

今回は、

Sassって何から覚えればいいんだろう？

といった方に対する記事となります。

Sassは便利ですが全部の機能を使いこなそうとすると大変なので、よく使う機能から覚えていきましょう！

1 Sassで覚えておきたい機能は5つ！
2 ネスト（入れ子）
3 ＆（親セレクタの参照）
4 変数
5 パーシャル（ファイルの分割）
6 mixin
7 四則演算
8 おすすめの本
9 まとめ

Sassで覚えておきたい機能は5つ！

Sassで良く使う機能はこちら

ネスト（入れ子）
＆（親セレクタの参照）
変数
パーシャル（ファイルの分割）
mixin

それでは1つずつ見ていきましょう。

※記法はSASSではなくSCSSで解説します

ネスト（入れ子）

これは書き方の事ですが、CSSとの違いを見てみましょう。

まずは共通となるHTMLがこちらです。

<header class="header">
  <nav> 
    <ul>
      <li><a href="#">menu1</a></li> 
      <li><a href="#">menu2</a></li>  
      <li><a href="#">menu3</a></li> 
    </ul>
  </nav>
</header>

そしてCSSの書き方（style.scssからコンパイルされたCSS）がこちら

.header {
  position: fixed;
  width: 100%;
}
.header ul {
  display: flex;
  justify-content: center;
}
.header li {
  font-size: 20px;
}
.header a {
  color: #ccc;
  text-decoration: none;
}

そしてscssがこちら

.header {
  position: fixed;
  width: 100%;
  ul {
    display: flex;
    justify-content: center;
  }
  li {
    font-size: 20px;
  }
  a {
    color: #ccc;
    text-decoration: none;
  }
}

この書き方がネスト（入れ子）となり、階層のような構造になっています。

scssだと毎回 .header と書かなくて済みますね。

メリットは単に .header と書く回数が少なくなるだけでありません。

例えばclass名が変わった時を想像してみて下さい。

この場合だとCSSの方は4ヵ所書き換えないといけませんが、scssの方は1ヵ所で済みます。

この辺がSassの便利な所ですね。

また今回のネストは1ヵ所ですが、その中にまたネストすることも出来ます。

こうやってどんどん階層を深くすることも出来ますが、あまり深くしない方がいいので出来れば2～3つぐらいまでにしておきましょう。

余談ですが、このネストという書き方がSassでないと使えないと知らずにCSSで書いて悩んだことがあります・・・

＆（親セレクタの参照）

これはネストと一緒に使います。

親セレクタの参照とか言われても良く分からないと思いますが、＆は繋げるものと思って下さい。

命名規則であるBEM記法や擬似要素で使うのが分かりやすいと思います。

BEM記法についてはまだ記事を書いていないのでググって頂きたいのですが、例えば header__inner など大元のclass名（header）とそのclass名（inner）をアンダースコア2つ（__）で繋げる感じです。

まずはHTMLを見てみます。

<header class="header">
  <nav>
    <ul class="header__inner">
      <li class="header__item">
        <a href="#" class="header__link">menu1</a>       
      </li>
      <li class="header__item">
        <a href="#" class="header__link">menu2</a>       
      </li>
      <li class="header__item">
        <a href="#" class="header__link">menu3</a>       
      </li>
    </ul>
  </nav>
</header>

先ほどとの違いはheader以外にもclass名が付いたところです。

次にCSSを見てみます（内容は適当なので書き方だけ見て下さい）

.header {
  position: fixed;
  width: 100%;
}
.header__inner {
  display: flex;
  justify-content: center;
}
.header__item {
  font-size: 20px;
}
.header__link {
  color: #ccc;
  text-decoration: none;
}
.header__link:after {
  content: ">";
  height: 50px;
  position: absolute;
  width: 50px;
}
.header__link:hover {
  color: #2ecc71;
}
.header__link:not(:first-of-type) {
  margin-left: 20px;
}

そしてscssがこちら

.header {
  position: fixed;
  width: 100%;
  &__inner {
    display: flex;
    justify-content: center;
  }
  &__item {
    font-size: 20px;
  }
  &__link {
    color: #ccc;
    text-decoration: none;
    &:after {
      content: ">";
      height: 50px;
      position: absolute;
      width: 50px;
    }
    &:hover {
      color: #2ecc71;
    }
    &:not(:first-of-type) {
      margin-left: 20px;
    }
  }
}

このようにBEMでclass名を付けていた場合は親セレクタである .header と __inner や__item など繋げることが出来、直感的に親セレクタとの関係性が分かります。

また擬似要素もぱっと見で分かるので便利ですね。

変数

これは例えばメインカラーやフォントカラーなど、使う箇所が沢山あるものに対して設定すると後から修正するときが楽になります。

たとえば次のようなCSSがあったとします。

.header  {
  background-color: #fff;
  color: #35b0b9;
}
.top  {
  background-color: #fff;
  color: #35b0b9;
}
.about  {
  background-color: #fff;
  color: #35b0b9;
}
.news  {
  background-color: #fff;
  color: #35b0b9;
}

これを変数にしてみます。

$color-main: #fff;
$color-font: #35b0b9;

するとscssではこのような書き方が出来ます。

.header  {
  background-color: $color-main;
  color: $color-font;
}
.top  {
  background-color: $color-main;
  color: $color-font;
}
.about  {
  background-color: $color-main;
  color: $color-font;
}
.news  {
  background-color: $color-main;
  color: $color-font;
}

これも書く時の手間はCSSと変わりませんが、先ほど書いたように後から色を変えたいとなった場合、変数の方を変えれば変更箇所は1ヵ所で済みます。

もちろん色だけでなく、font-family や font-size、余白など何でも変数にすることが出来ます（一番よく使うのが色かと思います）

パーシャル（ファイルの分割）

そしてこのパーシャルがSassを使う最大のメリットだと思っています。

コーポレートサイトや超長いLPなどコーディングしていると、CSSがめちゃくちゃ長くなりませんか？

修正した時に数千行もあったら探すのに一苦労します。

しかしパーシャルを使えばファイルをセクションごとに分けたり、先ほどのように色を変数で管理するファイルを別にしたりすることも可能です。

セクションごとにファイルを分けておけば、修正したい時にそのセクションのファイルだけ見ればいいので断然探しやすくなります。

それでは具体的にどうすればいいのか解説します。

まずはindex.htmlと同じ階層にcssフォルダとsassフォルダを作ります。

そしてsassフォルダの中にstyle.scssファイルと、種類ごとのフォルダを作ります（フォルダはご自身の環境に合わせて下さい）

例えばこんな感じです。

そして各フォルダの中にscssファイルを作成するのですが、ここでcssファイルと違う点がファイル名の最初にアンダースコアを書くという点です。

例えばヘッダーセクションのファイルであれば header.scss ではなく、_header.scss となります。

この分割したファイルの事をパーシャル（partial）と呼びます。

そしてstyle.scssでこの分割したファイルを読み込む記述をしないといけません。

その記述とファイル構成はこちらになります（あくまでも参考です）

style.scssでは、

@import "section/header";

といった感じで書きます。

@import ” フォルダー名 / ファイル名“; ですね。

ファイル名に関してはアンダースコアと拡張子は省略できるので、_header.scss ではなく header でOKです。

※ここで注意点が1つ

変数をまとめたファイルは一番上に書かないとダメってことです。

ファイルは上から順番に読み込んでいくので、変数を使ったファイルが変数を設定したファイルより前にあると変数として認識してくれません

mixin

これは変数と少し似ていますが、スタイルの集まりを定義して他の場所で呼び出すことが出来る機能です。

これはちょっと出来ることが多いですが、ページ数の多いサイトを制作するときなどは活用できるかと思います。

まずはコードで見た方が分かるかと思います。まずはscssです。

@mixin btn {
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.moreBtn {
  @include btn;
}

そしてコンパイルされた後のCSSはこちらです。

.moreBtn {
  display: inline-block;
  margin: 0;
  padding: 10px;
}

式で表すと、

@mixin ミックスイン名 { 
  定義したいCSSのプロパティ
}
セレクタ { 
  @include ミックスイン名;
}

となります。

変数の場合は1つのプロパティしか設定できませんが、mixinの場合はスタイルの集まりでまとめる事が出来るので、全てのページのボタンが共通のデザインだった場合などに活躍します。

これもメリットは変数と同じで、もしサイトに同じデザインのボタンが20個あった場合でも、mixinを使っていれば修正するときはmixinの中を変えればいいだけになります。

ただ全部同じclass名にすればいいんじゃないかと思うかも知れませんが、次に解説する引数が使える点や、@includeが使われていれば共通のパーツなんだなとすぐ分かります。

mixinで引数を使う

またmixinでは引数(変数)を使う事が出来ます。

引数の説明より例を見た方が早いと思います。まずはscssを見てみます。

@mixin btn($color) {
  color: $color;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.moreBtn {
  @include btn(#fff);
}
.nextBtn {
  @include btn(#333);
}

($color) が引数の部分ですね。あとは color: $color; とします。

@include btn までは先ほどと同じですが、今回は@include btn (カラーコード)となっています。

今回はデザインは同じだけどcolorだけ異なるボタンをイメージして下さい。

それぞれのボタンで@include btn(カラーコード)のカラーコード部分を記述します。

そしてコンパイルされた後のCSSはこちらです。

.moreBtn {
  color: #fff;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.nextBtn {
  color: #333;
  display: inline-block;
  margin: 0;
  padding: 10px;
}

少し難しいですが、引数とcolor: $color;によりcolorだけ別にすることが出来ました。

mixinの引数で初期値を設定

ボタンが20個あって2つだけ色が違うといった場合、@include btn (カラーコード) でカラーコードを20回書くのは手間です。

なのでこういった場合は初期値を設定することも出来ます。

例えば20個中18個のボタン(moreBtn)はcolorが#333だとするとscssは次のようになります。

@mixin btn($color: #333) {
  color: $color;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.moreBtn {
  @include btn();
}
.nextBtn {
  @include btn(#fff);
}

@mixin btn($color: #333) の#333が初期値となります。

そしてコンパイルされた後のCSSはこちらです。

.moreBtn  {
  color: #333;
  display: inline-block;
  margin: 0;
  padding: 10px;
}
.nextBtn  {
  color: #fff;
  display: inline-block;
  margin: 0;
  padding: 10px;
}

@mixin btn($color: #333) では先ほど違い、引数の後にコロン（；）と初期値を設定し、@include btn() では括弧の中は空にします。

すると空の方は初期値となり、初期値以外の値にしたい場合は括弧の中に値を記述します。

mixinの引数を複数設定

この引数はカンマで区切る事で複数設定することが出来ます。

まずはscssで見てみます。

@mixin btn($color, $margin) {
  color: $color;
  display: inline-block;
  margin: $margin;
  padding: 10px;
}
.moreBtn {
  @include moreBtn(#333, 10px);
}

こんかいは color と margin を引数にしました。

そして@includeで引数を指定（#333, 10px）すると次のようなCSSがコンパイルされます。

.moreBtn  {
  color: #333;
  display: inline-block;
  margin: 10px;
  padding: 10px;
}

@include では @mixin で設定した順番に引数を指定すればOKです。

もちろんこれも初期値を設定出来ます。

四則演算

あと個人的に覚える優先順位としては低いかなと思ったので、覚えておきたい機能5つの中には入れませんでしたが、Sassでは四則演算も出来ます。

いわゆる足し算(＋)、引き算(－)、掛け算(＊)、割り算( / )ですね。

まずは例を見てみたいと思いますが、今回はXDカンプから line-height の数値を求めてみます。

XDでは以下の赤枠の数値で line-height を求められます。

今回は、24 ÷ 16 ＝ 1.5 となります。

またついでに width も書いてみます。

これを scss で書くと次のようになります。

.btn {
  line-height: (24 / 16);
  width: 100px + 20;
}

そしてコンパイルされた後のCSSはこちらです。

.btn  {
  line-height: 1.5;
  width: 120px;
}

上記の通り数値を括弧で囲むのは割るときだけで、それ以外の場合は括弧は不要です。

演算もいろいろと出来ますが、個人的にはこれぐらい分かっていればいいかなと思います。

まとめ

結構なボリュームになってしまいましたが、Sassは早い段階で慣れておくとコーディングがグッと楽になるので、以前書きましたがサイト模写を1～2回やった後に習得することをおすすめします。

プログラミング全般にも言える事ですが、間違っても「Sassを極めよう！」とか思わずに、使用頻度の高いと思われるものから習得していきましょう。

メニュー

カテゴリー

Sassで覚えておきたい機能は5つ！

ネスト（入れ子）

＆（親セレクタの参照）

変数

パーシャル（ファイルの分割）

mixin

mixinで引数を使う

mixinの引数で初期値を設定

mixinの引数を複数設定

四則演算

おすすめの本

まとめ

プロフィール

アーカイブ

カテゴリー