Sassとは何？何ができるのかについて解説します！【CSS・Sass】

2024年11月17日 2024年11月17日

講師:中島

あなたはSassを知っていますか？
この記事は「Sassという言葉を初めて聞いた」「聞いたことはあるけどCSSとの違いが理解できていない」という方に向けて
読んでいただきたい記事になっています。
この記事を読み終えるとSassの概要が理解できた状態になるでしょう。

目次：

この記事のポイント

Sassとは何かがわかる
SASS記法とSCSS記法の違いがわかる
Sassを使うことのメリット・デメリットがわかる

Sassとは

Sass（Syntactically Awesome Stylesheets）は、CSSをより効率的に書くためのCSSのメタ言語です。
メタ言語とは「ある言語について何らかの記述をするための言語」を意味し、Sassは「CSSに対し機能を拡張した言語」という位置付けです。

Sassには、「SASS記法」と「SCSS記法」という2つの異なる記法があります。
これらがややこしい原因なので、しっかり理解していきましょう。詳しくは以下のセクションで解説します。

特にCSSと大きく違う点は、変数を使えたり、ネストができる点です。
それらのおかげで冗長な記述が減ったり、開発効率が上がったりします。
こちらも以下のセクションで解説します。

SassとCSSの違い

SassとCSSはどちらもスタイルシートを記述するためのツールですが、SassはCSSを拡張したメタ言語であり、より効率的にスタイルを管理するための追加機能を備えています。
ここでは、両者の主な違いについて解説します。

1. 変数のサポート

CSSでは変数を使用するにはCSSカスタムプロパティ（--var）を利用しますが、Sassでは専用の構文で簡単に変数を扱えます。
Sassの変数は数値や文字列、リストなどの複雑なデータ型を扱えるため、柔軟性が高いです。

CSS

:root {
  --primary-color: #3498db;
}

body {
  background-color: var(--primary-color);
}

Sass

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

2. ネスト構造

CSSではネスト構造がサポートされておらず、親セレクタを繰り返し書く必要があります。
一方で、Sassではネストを使うことで、親子関係を簡潔に記述できます。

CSS

.header {
  background-color: #f8f9fa;
}
.header .nav {
  color: #333;
}

Sass

.header {
  background-color: #f8f9fa;

  .nav {
    color: #333;
  }
}

3. ミックスインと関数

Sassには再利用可能なスタイルを定義するミックスインや、動的なスタイルを生成する関数がありますが、CSSにはこれらの機能がありません。

Sass

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

4. コンパイルが必要

CSSはそのままブラウザで読み込むことができますが、Sassはブラウザが直接解釈できないため、最終的にCSSにコンパイルする必要があります。
この点で、Sassを利用する際は開発環境にコンパイラを導入する手間が増えます。

5. モジュール化

CSSでもインポート機能（@import）はありますが、Sassの分割機能と@useまたは@importを使用したインポート機能はより強力です。
スタイルをモジュール化しやすく、大規模なプロジェクトで特に有用です。

Sass

// _variables.scss
$primary-color: #3498db;


// main.scss
@use 'variables';

body {
  background-color: variables.$primary-color;
}

SASS記法とSCSS記法の違い

Sassの中でも、2種類の構文があります。
SASSとSCSSは基本的に同じ機能を持っていますが、記述方法が異なります。

SASS記法

インデントベースのシンプルな構文。波括弧 {} やセミコロン ; が不要です。

基本構文

$color: #3498db

body
  background-color: $color
  color: white

SCSS記法

CSSに近い構文で、波括弧 {} やセミコロン ; を使います。

基本構文

$color: #3498db;

body {
  background-color: $color;
  color: white;
}

SCSSはCSSの書き方に近いため、既存のCSSファイルをそのままSCSSファイルに変換できるという利点があります。

Sassを使うことのメリット・デメリット

メリット(4つ)

1. コードの再利用性が高まる

Sassの変数やミックスインを使うことで、スタイルの重複を減らし、コードを効率的に再利用できます。
変更が必要な場合も、変数やミックスインを更新するだけで、全体のスタイルを一括で修正できます。

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
}

2. 保守性が向上する

Sassのネスト機能やパーシャル（部分ファイル）を使うと、コードの分割ができ、整理されるため、保守が容易になります。
特に大規模プロジェクトでは、ファイルの分割とインポートによって管理が簡単になります。

// _header.scss
.header {
  background: #f8f9fa;

  .nav {
    color: #333;
  }
}

// main.scss
@import 'header';

3. 生産性の向上

Sassのネストや継承、計算機能などを活用することで、記述量を大幅に削減できます。
冗長なCSSコードを効率的に書けるようになります。

%shared-style {
  font-family: Arial, sans-serif;
  padding: 10px;
}

.button {
  @extend %shared-style;
  background-color: #3498db;
}

.alert {
  @extend %shared-style;
  background-color: #e74c3c;
}

4. 動的なCSSの生成

Sassでは条件分岐やループが使えるため、動的にCSSを生成できます。例えば、複数のカラーバリエーションを簡単に作成できます。

$colors: (primary: #3498db, secondary: #2ecc71, danger: #e74c3c);

@each $name, $color in $colors {
  .button-#{$name} {
    background-color: $color;
  }
}

デメリット(4つ)

1. 学習コストがかかる

Sassには独自の記法や機能があり、CSSに慣れた人でも新しい概念（ミックスイン、継承、ループなど）を学ぶ必要があります。
特に初心者にはややハードルが高いことがあります

2. 最終的にはCSSに変換する必要があり手間になる場合がある

Sassはそのままブラウザで動作しないため、CSSにコンパイルする必要があります。
そのコンパイルしたCSSを読み込むことで反映されます。
このため、開発環境にコンパイラを導入したり、ビルドツール（WebpackやGulpなど）を設定する手間が発生します。

しかし、Reactなどモダンなフレームワーク(またはライブラリ)は、Sassを標準サポートしていることがあり、
自動でCSSに変換し反映してくれます。
また、コマンドや拡張機能などの場合、Sassファイルの変更を監視し、CSSに自動変換してくれる「ウォッチモード」を利用することもできます。

よって、変換を意識しなくても開発ができるため、Sassがサポートされている場合は、このデメリットは気になりません。