コーディングCSSgulpPreprosSass

Sass（SCSS）でCSSコーディングを効率化・メリットと使い方を知る

Sass 画像1

同じようなCSSを繰り返し書いて嫌になったことはないだろうか。サイトで使っている色が煩雑になってしまったことは。僕も、散々不毛なCSSを書いていたけれど「Sass」を覚えてかなり楽になった。

Sassとは

Sass（サス）は、CSSを効率的に書くことができるメタ言語（CSSプリプロセッサ）。語源は「書き方 （Syntactically）がイケてる（Awesome）スタイルシート（Style Sheets）」の略らしい。

書き方は2種類ある。Rubyのようにインデントのみで書いていく「Sass」スタイルと、CSSと同じようなカッコでくくる「SCSS」記法。主流なのはSCSSで、普通のCSSもそのままコピペで使える。

ファイルの拡張子もそれぞれ .sass .scss となっている。

Sassスタイル：インデント型

.btn
  display: block
  margin: 0 auto
  padding: 1em
  span
    display: inline-block

SCSSスタイル：カッコ型

.btn {
  display: block;
  margin: 0 auto;
  padding: 1em;
  span {
    display: inline-block;
  }
}

コンパイルが必要

Sassそのままではブラウザが認識してくれない。なので、Sassから普通のCSSを書きだす（コンパイル）仕組みを作る。コンパイルは、タスクランナー系（gulpなど）やコンパイラーアプリ（Preprosなど）を用いて自動化するのが一般的。

Sassのメリット

ここでは、僕が便利になったと感じている特徴をリストアップしてみる。記法は現在使っているSCSSスタイル。

入れ子（ネスト）できる

ボタンとボタンの中のテキストをCSSで書く場合に、CSSだと毎回頭に .btn と付ける必要がある。Sassであれば入れ子（ネスト）で書き自動付与できる。

.btn {
  display: block;
  span {
    display: inline-block;
  }
}

↓

.btn {
  display: block;
}

.btn span {
  display: inline-block;
}

変数が使える

変数が使えるので、サイト全体の色や数値をまとめて書いておき呼び出すような使い方ができる。後からの修正も一括で行えて便利。

$pjcolor-01: #52B2C4;
$pjcolor-02: #FFFFFF;

.btn {
  background-color: $pjcolor-01;
  span {
    color: $pjcolor-02;
  }
}

↓

.btn {
  background-color: #52B2C4;
}

.btn span {
  color: #FFFFFF;
}

演算できる

コンパイル時の演算が可能。変数と併用することで、12分割していたグリッドを10分割に変更するなどの使い方ができる。

$split-grid: 12;

.col-2 {
  flex: 0 0 100% / $split-grid * 2;
  max-width: 100% / $split-grid * 2;
}

↓

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

関数で繰り返しを楽に書ける

@each などを使うことで連続したCSSを1回で書ける。変数と組み合わせることで、12分割のCSSを自動出力するような使い方ができる。繰り返し中に if 文を使って分岐するなども可能。

$split-grid: 12;

@for $i from 1 through $split-grid {
  .col-#{$i} {
    flex: 0 0 100% / $split-grid * $i;
    max-width: 100% / $split-grid * $i;
  }
}

↓

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

/* 3〜11まで省略 */

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

継承（mixin）で楽に書ける

先に @mixin で型を作っておいて、@include で型を継承することが可能。何度も書くのは面倒なMedia Queryをmixinにするなどの使い方が有用。

@mixin desktop {
  @media screen and (min-width: 992px) {
    @content;
  }
}

.p {
  font-size: 16px;
  @include desktop {
    font-size: 20px;
  }
}

↓

.p {
  font-size: 16px;
}

@media screen and (min-width: 992px) {
  .p {
    font-size: 20px;
  }
}

ファイルを分割管理できる

@import を使い他のSCSSを読み込める。これはCSSのようなリンクではなく、コンパイル時にすべて1ファイルで書き出してくれるものなので、サイトにも優しい。ファイルを変数やパーツに分けて管理しておくと便利。

@import "variable/_breakpoint";
@import "variable/_color";

@import "mixin/_mediaquery";
@import "mixin/_placeholder";

@import "base/_global";
@import "layout/_section";

やりすぎ注意

変数・ネストなどは便利ではあるけれど、やりすぎると見通しの悪いコードになってしまう。ネストに関しては「2階層まで」などのルールを自分で決めて書くのがオススメ。

.section {
  .article {
    padding: $pjpadding-01;
    .group {
      background-color: $pjcolor-03;
      width: $pjwidth-01;
      .btn {
        background-color: $pjcolor-01;
        width: $pjwidth-01 / 4;
        a {
          color: $pjcolor-02;
          span {
            display: inline-block
          }
        }
      }
    }
  }
}

参考

Sassの習得時期に自作でCSSフレームワークや色変数パックを作っていたので、Sassの具体的な書き方を知りたい場合は参考にしてほしい。

関連記事