2023.07.23
2023.07.29 (更新日)

Sassのメリット・できること5選！デメリットや必要性も解説【CSSからステップアップしよう】

WEB制作

CSSを使用していると、同じセレクタを書くことや、同じスタイルを指定することがよくありますよね。

Sassには、その様な手間を減らしたり、作業を効率的に進められる機能が揃っています。

この記事では、Sassを導入するか迷っている方に向けてメリット・デメリットやできること、必要性を解説しています。

Sassのまとめ記事はこちら

まとめ記事

【Sassまとめ】Sassについて知りたいこと、導入方法や使い方や全部わかる

この記事を読んでほしい人

CSSを使っていて、作業の効率化をしたい人
Sassは何ができるツールなのか知りたい人
Sassの主な機能を知りたい人
Sassのデメリットを知りたい人

Sassってなに？

簡潔に言うと、CSSに追加機能がついて大幅にコードの記述量が減り、修正が必要になった時などに所要時間を減らせる、CSSの業務効率化ツールです。

コード記述量の多い大規模なサイトになるほど効果が期待でき、メンテナンスのしやすいスタイルシートを作成することができます。

また、Sassには.sassと.scssの2種類の書き方があります。
２つの違いは下記の記事で詳しく解説していますので参考にしてください。

【慣れればSASS一択】SASSとSCSSはどっちがいい？特徴や注意点も解説

Sassのメリット・できること

下記がメリット・できること5選のリストです。
このリストを元に解説していきます。

セレクタを入れ子構造で記述でき、コードの記述量が減る
スタイルや数値などを変数化して使い回す事ができる
四則演算を利用できる
@mixin（ミックスイン）機能が超優秀
複数ファイルを一つにまとめたり、ファイルの圧縮が簡単にできる

１. セレクタを入れ子構造で記述できる

Sassでは要素の親子関係を入れ子構造（ネスト）で指定することができます。
例えば下記のコード例のように、「〇〇の子要素の〇〇」のような指定が簡単にできるようになります。

.paragraph {
    font-size: 16px;
}
.paragraph .large-text {
    font-size: 18px;
}
.paragraph .min-text {
    font-size: 12px;
}

.paragraph {
    font-size: 16px;
    .large-text {
        font-size: 18px;
    }
    .min-text {
        font-size: 12px;
    }
}

Sassではこの親子関係は、入れ子構造でまとめて記述することが可能なので、かなりの時短になります。

２. スタイルや数値などを変数化して使い回す事ができる

Sassでは、スタイルや数値などを変数化して色んな箇所、ファイルで使用することができます。

変数とは

値を保管しておく入れ物。変数を使用することで、同じ値を複数の場所で使い回すことができます。

$primary-color: #007bff;

// 変数の使用
background-color: $primary-color; // -> background-color:#007bff; という意味

上のコード例では、「$primary-color」に「#007bff」の文字列が代入（入った）されました。
使用したい場所で「$primary-color」と記載すると、「#007bff」と入力したことと同じ意味になります。

下記の例のように色んな場所で使う色や数値を、一箇所でまとめて管理すると、メンテナンス性が上がりそうですね。

// 色の一覧
$color__primary: #ff0000;
$color__text: #666;

// 数値の一覧
$num__md-break: 768;
$num__lg-break: 1080;

３. 四則演算を利用できる

Sassでは下記の計算をすることができます。

足し算 [+]
引き算 [-]
掛け算 [*]
割り算 [/]
割り算の余りの計算 [%]

さきほどの変数と組み合わせることもできます。

４. @mixin（ミックスイン）機能が超優秀

Sassには@mixinという機能があり、この機能を使用すると効率が爆上がりします。
この機能が便利すぎるので、この機能のためだけにSassを導入するのもアリだと思います。

下記はメディアクエリとスタイルのかたまりを書いています。

$sm_break: 767.9px;
$md_break: 768px;
$lg_break: 1080px;
$xl_break: 1220px;

// @mixin md
@mixin sm {
  @media screen and (max-width: $sm_break) {
    @content;
  }
}

@mixin md {
  @media screen and (min-width: $md_break) {
    @content;
  }
}


@mixin lg {
  @media screen and (min-width: $lg_break) {
    @content;
  }
}

@mixin xl {
  @media screen and (min-width: $xl_break) {
    @content;
  }
}

@mixin gridSet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3%;
}

このコード例を使用すると下記のような記述になります。

.font-size {
  font-size: 13px;
  @include md {
    // 画面サイズ768px以上で適用
    font-size: 14px;
  }
  @include lg {
    // 画面サイズ1080px以上で適用
    font-size: 16px;
  }
  @include xl {
    // 画面サイズ1220px以上で適用
    font-size: 18px;
  }
}

.display-grid {
    // gridSet内のコードが出力される
  @include gridSet;
}

このように、メディアクエリや使いまわしたいスタイルのかたまりを指定しておき、
使いたい場所で出力するとコードの記述量が大幅に削減できそうです。

@mininも一箇所でまとめて管理するとメンテナンス性が上がりそうですね。