Sassを使うメリットとは？使い方と本当に必要な5つの機能を解説

今回はCSSを拡張した言語「Sass」について解説します。

Sassって何？
どんなメリットがあるの？
使い方は？

このあたりを初心者でもわかるように説明します。

Sassとは
Sassを使うメリット
Sassの使い方
Sassのその他の使い方
Sassのおすすめ勉強法は？
まとめ

Sassとは

Sass（Syntactically Awesome StyleSheet）はCSSの機能を拡張し、プログラミング的な要素を加えた言語です（メタ言語と言います）。簡単に言えばCSSの完全上位互換です。

Sassを使うメリットは以下のようなものがあります。

ファイルを分割できる
メンテナンス性が高まる
構造が視覚的にわかりやすい

詳しく解説します。

Sassを使うメリット

ファイルを分割できる

CSSは「style.css」にバーっと書くことが多いですが、Sassは「_header.scss」「_footer.scss」「_sidebar.scss」というようにパーツごとに分割して管理します。

これにより以下のようなメリットがあります。

コードの見通しが良くなる
どこに何が書いてあるか把握しやすくなる→修正しやすい

後から修正したいと思った場合でもどこのファイルを見ればいいかが感覚的にわかりやすいので、該当箇所を探す手間をかなり減らすことができます。

また、ファイル数がいくら増えても1つのファイルに結合できるため、最終的に読み込むファイルは1つだけでいいのもメリットです（CSSでもできないことはないが、リクエスト数が増えるためページの表示が遅くなる可能性がある）。

style.scss  //←全て結合したファイル
  ├_header.scss
  ├_footer.scss
  ├_sidebar.scss
  ├_main.scss
  └ ...

最終的に読み込むファイル↓

style.css

こんな感じでいくらファイルが増えても全く気にする必要はありません。

メンテナンス性が高まる

ファイル分割もそうですが、Sassを使うとコードのメンテナンス性や再利用性が爆上がりします。メンテナンス性が上がると修正に強くなるので、万が一修正が出ても対応しやすくなります。

具体的には「変数」を使って複数の要素に同じ値を指定したり、「@mixin」で同じスタイルのセットを使い回すことができます。使い方は後述（→スキップ）

構造が視覚的にわかりやすい

Sassは「ネスト」を使うことができ、何がどの子要素なのか視覚的にわかりやすく書くことができます。

CSSは普段こんな感じで書くことがあると思います。

/* CSS */
.block {
  padding: 20px;
  font-size: 16px;
}
.block .element {
  margin-top: 10px;
  width: 80%;
}
.block .element .item {
  width: 100%;
}

これをネストを使って書くと以下のようになります。

/* Sass */
.block {
  padding: 20px;
  font-size: 16px;
    
  .element {
    margin-top: 10px;
    width: 80%;

    .item {
      width: 100%;
    }
  }
}

毎回同じセレクタを書く必要がなく、まとまりごとに意識しやすくなるので構造がわかりやすくなります。

コードの量が増えるとこんな風にまとまりごとに書けるのが特にありがたく感じます。

Sassを使うメリットはこんな感じです。

全体的にCSSと比べて特にファイルの管理、コードの修正が圧倒的にラクになります。

CSSはコードの量が増えるとカオスになりがちなので、数ページ程度のサイトでも絶対導入した方が後々ラクになるはずです。

Sassの使い方

SassはCSSにはない便利な機能がたくさんあります。

中でもよく使う5つの機能を紹介します。というかこの5つ以外ほぼ使わないです。

使い方1：ネスト

先ほどさっと紹介しましたが、ネストを使うことでコード量を減らし、要素をまとまりごとに把握しやすくなります。

/* Sass */
section {
  width: 960px;

  .block {
    float: left;
    width: 700px;
    
    .block-inner {
      display: inline-block;
      font-size: 1.8rem;
    }
  }
}

上のコンパイル結果はこんな感じ。

/* CSS */
.section {
  width: 960px;
}
.block .element {
  float: left;
  width: 700px;
}
.block .element .item {
  display: inline-block;
  font-size: 1.8rem;
}

セクションごとにまとまりとしてコードを管理できるので、どこに何が書いてあるかわかりやすくなりますね。

使い方2：&（アンパサンド）

「&=親セレクタ」です。

&を使うことで書き方を省略してセレクタに擬似要素をつけたり、クラス名をつなげたりすることができます。

/* Sass */
.list {
  display: inline-block;
  padding: 20px;
  
  &-item {  //← = .list-itemとなる
    color: #4cbcf6;

    &:hover {  //← = .list-item:hoverとなる
      text-decoration: none;
    }
  }
}

上をコンパイルするとこんな感じになります。

/* CSS */
.list {
  display: inline-block;
  padding: 20px;
}
.list-item {
  color: #4cbcf6;
}
.list-item:hover {
  text-decoration: none;
}

&の部分がそのまま親セレクタに置き換わっているのがわかると思います。

クラス名を繋げれば階層構造がわかりやすくなるし、::before,::after,:hoverなど、どこにスタイルが当たっているか把握しやすくなります。

（中級者向け）CSS設計がやりやすくなる

少し難しい内容なのでわからない人は飛ばしても大丈夫です。

ネストと&（アンパサンド）を使うことでFLOCSS、SMACSS、BEMといったCSS設計がやりやすくなります。

以下はSassでFLOCSS設計を使う例です。

/* Sass */
.block {
  width: 100%;
  
  &__element {
    margin-top: 30px;

    &--modifier-1 {
      background-color: #f38c96;  //赤背景色
    }
    &--modifier-2 {
      background-color: #8cd1f3;  //青背景色
    }
  }
}

上をコンパイルするとこんな感じになります。

/* CSS */
.block {
  width: 100%;
}
.block__element {
  margin-top: 30px;
}
.block__element--modifier-1 {
  background-color: #f38c96;  //赤背景色
}
.block__element--modifier-2 {
  background-color: #8cd1f3;  //青背景色
}

全てのセレクタが1つのクラスで指定されていることがわかります。

シングルクラスを使うメリットは、セレクタがいかなる親要素にも依存しないため、たとえレイアウトやタグが変わってもスタイルに一切影響が出ないという点です。つまり修正に強くなります。

さらに1つのクラスで全てのスタイルを指定しているため、CSSの詳細度によるスタイルの打ち消し合いが基本的に起こりません。CSSが効かない原因として詳細度が邪魔しているというのはよくあることなので、詳細度を気にせずコーディングできるのはかなりいいですね。

また、一部だけスタイルを変更（追加）したい場合はmodifierで簡単に機能を拡張できます。

/* Sass */
.block {
  width: 100%;
  
  &__element {
    margin-top: 30px;

    &--modifier-1 {
      background-color: #f38c96;  //赤背景色
    }
    &--modifier-2 {
      background-color: #8cd1f3;  //青背景色
    }
    &--modifier-3 {
      background-color: #f7f06e;  //黄色背景色を追加（機能を拡張）
    }
  }
}

modifierを含めてコンパイル後はシングルクラスになるので、他のセレクタにスタイルが影響を与えてしまう可能性をかなり減らすことができます。

この辺りの設計のやり方は身につけておくと綺麗なコードが書ける上、コードの保守性やメンテナンス性がグッと高まります。CSS中級者を目指す人はぜひ触れておくといいと思います。

設計に関しては以下の本が大変参考になりました！今回紹介したFLOCSSやコンポーネントの使い回し方など、実務で役立つ知識が盛りだくさんです。かなりオススメ。

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」 [ 谷拓樹 ]

created by Rinker

話が結構逸れてしまったので、Sassの使い方に戻りましょう。

使い方3：変数

CSSでは複数箇所に毎回同じ値を指定する必要があったものを、Sassなら変数で一括管理できます。

/* CSS */
.block {
  background-color: #ddd;
}
.element {
  background-color: #ddd;
}
.item {
  background-color: #ddd;
}

「#ddd」という値が複数の場所で使われているので、変数で一元管理してしまいましょう。

/* Sass */
$bg-1: #ddd;  //←変数に値を指定

.block {
  background-color: $bg-1;  //←変数を使いまわせる
}
.element {
  background-color: $bg-1;
}
.item {
  background-color: $bg-1;
}

もし修正が必要になった時は「$bg-1: #ddd;」の1箇所書き換えれば全て置き換わるので、修正がめちゃめちゃラクになります。

変数には背景色や文字色など、主に色関連の値を入れることが多いですが、フォントサイズやopacityなどもサイト内で統一したい場合は変数で管理することもあります。

$color-base: #dff2f6;  //ベース
$color-main: #7ee7b6;  //メイン
$color-accent: #ff5957;  //アクセントカラー

$font-large: 2.2rem;
$font-base: 1.6rem;

$opacity: 0.7;

同じ値を使い回すことでサイトに統一感が出るのと、修正がめちゃめちゃ楽になるというメリットがあります。

使い方4：@mixin

@mixinは定義したスタイルのセットを複数箇所で使い回せるというスグレモノです。

/* CSS */
/* 共通のスタイルが複数箇所にある */
.block {
  position: absolute;
  content: '';
  display: inline-block;
}
.item {
  position: absolute;
  content: '';
  display: inline-block;
}
.item {
  position: absolute;
  content: '';
  display: inline-block;
}

複数の場所で共通のスタイルが見られるので、mixinでまとめてしまいましょう。定義した@mixinは@includeで呼び出します。

/* Sass */
@mixin absolute {  //←スタイルのセットと名前を定義
  position: absolute;
  content: '';
  display: inline-block;
}

.block {
  @include absolute;  //←＠mixinを呼び出し
}
.element {
  @include absolute;
}
.item {
  @include absolute;
}

上のSassをコンパイルするとCSSに書いたものを同じ結果が得られます。

コードの量が減り見通しがグッと良くなる上、一度定義すればどこでも何度でも呼び出すことができます。特に使いやすいセットは他のプロジェクトでも使い回せるため、コーディングの効率がかなり上がります。

使い方5：@import

分割したSassファイルは1つのSassファイルにまとめて全て読み込み、それをコンパイルすることで1つのcssファイルに変換することができます。

ファイルの読み込みには@importを使います。ファイル名は大体「style.scss」ですね。ちなみに文頭の「_」と文末の「.scss」は省略することもできます。

@import 'foundation/_base.scss';
@import 'foundation/_variable.scss';
@import 'foundation/_mixin.scss';
@import 'layout/_header.scss';
@import 'layout/_main.scss';
@import 'layout/_footer.scss';
@import 'object/project/_project.scss';
@import 'object/_component.scss';
@import 'object/_utility.scss';

「gulp-sass-glob」を使うとフォルダ内のファイルをまとめて読み込むことも可能です。

@import 'foundation/**';
@import 'layout/**';
@import 'object/**';

これで各scssファイルに書いたコードがインポートされます。これをコンパイルすれば1つのcssとして全て出力できるわけですね。

Sassのその他の使い方

その他の使い方としては、スラッシュ2つ「//」で1行コメントアウトができます。プログラミング言語で使えるやつですね。

//この部分がコメントアウトされます。
/* この部分もコメントアウトされます。 */

ただし、「//」のコメントアウトは1行のみ有効です。複数行コメントアウトしたい場合は行頭に「//」をつけましょう。

また、「//」はCSSにコンパイルすると消えます。コンパイル後も消したくないコメントは普通の「/*〜*/」を使いましょう。

他にも演算や関数などが使えますが…実際はあまり使わないので最初は無視してもいいレベルです。

上で紹介した5つが実際にSassで使う機能の90%くらいを占めてます。

「急遽Sassを使う必要がある」「とりあえず簡単にSassを触ってみたい」という人は上の5つさえ覚えておけばなんとかなります。

逆に「Sassをもっと使いこなせるようになりたい！」という人は本で一度体系的に勉強することをおすすめします。

Sassのおすすめ勉強法は？

Web制作者のためのSassの教科書という本が超おすすめです。

Sassの基本から応用まで詳しく解説してあり、gulpでコンパイルする方法、ファイル管理、著者が実際に現場で使っている実践テクニックなどが網羅されています。

こういうのはネットで情報をかき集めるより、一度本でまとめて勉強した方が個人的にいいと思います。

Sassはこの本1冊でバッチリです。あとは実際に使って慣れましょう。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ [ 平澤隆 ]

created by Rinker

まとめ

Sassは使えるようになると本当に便利だし、コーディングの効率を上げるには必須の技術となっています。

Web制作の現場でも取り入れられていることが多いので、使えるようになるとスキル的にも役立つし、何より自分がコーディングするときに便利です。

CSS中級者を目指す人はぜひ習得しておきましょう（あとできれば設計も！）

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる