2019/10/28 (更新日: 2019/11/19)

【初心者向け】Sassを導入するメリット3選

今回の記事では、私が実際に使用して実感したSassのメリットを3つご紹介します。

『Sassがいまいちよく分からない…』『導入するメリットについて知りたい!!』と思っている方はぜひ最後までお読みください!

Sassとは?

Sassとは、CSSを拡張した言語で、利用する主な目的としては『CSSを効率的に書くこと』『CSSを管理しやすくすること』です。要するに、SassとはCSSを大幅にパワーアップさせた言語です。

最近ではWeb制作会社での普及率が上昇しているので、Webコーディングをするならば必ず覚えておいた方がいいと思います。

メリット1 記述を簡略化できる

Sassでは、親子関係のあるセレクタを入れ子にして書くことができます。下記のCSSコードをご覧ください。

.items {
  list-style: none;
}

.items li {
  display: inline-block;
}

.items li a {
  display: block;
  padding: 12px;
}

CSSでよくある記述ですね。こちらのCSSをSassで記述すると下記のようになります。

.items {
  padding: 0;

  li {
    display: inline-block;

    a {
      display: block;
      padding: 12px;
    }
  }
}

CSSでは、親の要素から対象要素までのセレクタを何度も書く手間がかかりますが、Sassは入れ子にすることで、同じ親のセレクタをまとめることができます。

また、『あとで見返した時に、まとまりとして把握しやすい』『親のセレクタ名を変更するとなった時に、1行の変更だけ済む』などというメリットもあります。

メリット2 同じ値を使いまわすことができる

CSSでは、複数の要素に同じ色を提要させる場合、何度も同じスタイルを書かなければなりませんが、Sassでは『変数』を使うことで、同じ値を使いまわせます。

//変数を宣言
$pjcolor:#cf2d3a;

//宣言した変数の呼び出し
.items {
    color:$pjcolor;
}
.notes {
    border:3px double $pjcolor;
}

これをCSSにコンパイルすると下記のようになります。

.items { 
   color:#cf2d3a;
}
.notes {
   border:3px double #cf2d3a;
}

このように、Sassではサイト全体の色や数値をまとめて書いて同じ値を使いまわすことができ、後からの修正も一括で行えるため非常に便利です。

メリット3 コードの再利用ができる

Sassには『ミックスイン』と呼ばれる機能があります。『ミックスイン』とは、スタイルの集まりを定義しておき、それを他の場所で呼び出して使うことができるというものです。

// ミックスインの定義
@mixin boxSet {
   padding:15px;
   background:#ccc;
   color:white;
}

//定義したミックスインの呼び出し
.relatedArea {
   @include boxSet;
}
.pickupArea {
   @include boxSet;
}

下記はCSSにコンパイルしたコードです。

.relatedArea {
   padding:15px;
   background:#ccc;
   color:white;
}
.pickupArea {
   padding:15px;
   background:#ccc;
   color:white;
}

このように、@mixinの後に任意のミックスイン名を定義することで、コードの呼び出しをすることができます。

何度も同じコードを書くのは面倒な場合、ミックスインを使用する事で、記述が減り、コードの変更も楽になります

まとめ

いかがでしたでしょうか?

Sassには、今回紹介したメリット以外にも多くのメリットがあります。学習コストは多少かかりますが、是非挑戦してみてください。

下記はSassのオススメの参考書です。『Sassについてもっと詳しく知りたい!』『実際に使ってみたい!』という方はお読みになってください。

実際に使ってみると、よりSassの魅力に気づくと思います。

本記事が皆さんにとって少しでもお役に立てれば嬉しいです。

Webエンジニアについて詳しく知りたい方はこちら
Webエンジニアの仕事内容・年収・将来性
本気でWebエンジニアになりたい方はこちら
未経験からWebエンジニアに転職する方法
フリーランスに興味ある方はこちら
フリーランス言語別案件数ランキング