お問い合わせ
お問い合わせ
ホーム > CSS > Sass（SCSS）とは？導入方法から基本構文まで解説

Sass（SCSS）とは？導入方法から基本構文まで解説

CSS
Sass（SCSS）を使った効率的なCSS設計とコーディングをイメージしたイラスト
Sass（SCSS）の導入方法から基本構文、ファイル分割までを初心者向けに解説

Web制作でCSSを書いていると、コード量が増えるにつれて管理が難しくなることがあります。色や余白の指定が何度も出てきたり、同じようなセレクタを繰り返し書いたりすると、修正に時間がかかりやすくなります。

そこで役立つのが、Sassです。Sassを使うと、CSSをより効率的に、整理しながら書けるようになります。

この記事では、Sassの中でも現在よく使われているSCSS記法を中心に、導入方法から基本構文までを初心者向けにわかりやすく解説します。

Sassとは

Sassとは、CSSをより便利に書くための拡張言語です。

通常のCSSでは使えない変数、ネスト、mixin、ファイル分割などの機能を使うことができます。Sassで書いたコードは、そのままブラウザで読み込むのではなく、最終的にCSSへ変換して使用します。

この変換処理は「コンパイル」と呼ばれます。

CSSの基本を先に確認したい場合は、以下の記事も参考になります。

関連記事：CSSの基本と仕組みを理解する｜見た目を制御する仕組みを体系的に解説

SassとSCSSの違い

Sassには、大きく分けて2つの書き方があります。

Sass記法

Sass記法は、波括弧やセミコロンを使わず、インデントで階層を表す書き方です。

body
  color: #333
  background: #fff

SCSS記法

SCSS記法は、通常のCSSに近い書き方です。波括弧やセミコロンを使うため、CSSを学んだ後でも理解しやすい特徴があります。

body {
  color: #333;
  background: #fff;
}

現在のWeb制作では、SCSS記法がよく使われます。そのため、この記事ではSCSSを中心に解説します。

Sassを使うメリット

Sassを使う主なメリットは、CSSを効率よく管理できることです。

変数で値をまとめて管理できる

サイト全体で使う色や余白を変数として管理できます。

同じ色を複数箇所で使っている場合でも、変数の値を変更するだけでまとめて修正できます。

ネストで構造をわかりやすく書ける

親要素と子要素の関係を入れ子で書くことができます。

ただし、ネストを深くしすぎるとCSSが複雑になるため、使いすぎには注意が必要です。

mixinで繰り返し処理をまとめられる

よく使うスタイルをmixinとして定義しておくと、必要な場所で呼び出して使えます。

ボタン、メディアクエリ、レイアウト調整などをまとめると便利です。

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

CSSを1つのファイルにすべて書くと、コード量が増えたときに管理しづらくなります。

Sassでは、ベース、レイアウト、パーツなどにファイルを分けて管理できます。

CSS設計については、以下の記事も参考になります。

関連記事：CSS設計とは？保守しやすいスタイルを書く基本を解説

Sassを使うときの基本的な流れ

Sassを使う基本的な流れは、次の通りです。

  1. SCSSファイルを作成する
  2. SCSSにスタイルを書く
  3. SCSSをCSSにコンパイルする
  4. HTMLからCSSファイルを読み込む

ブラウザはSCSSを直接読み込めません。そのため、必ずCSSへ変換する必要があります。

Sassの導入方法

Sassを導入する方法はいくつかありますが、ここではnpmを使う方法を紹介します。

npmの基本を確認したい場合は、以下の記事も参考になります。

関連記事：npmとは？初心者向けに使い方をわかりやすく解説

作業フォルダを作成する

まず、任意の場所に作業用フォルダを作成します。

mkdir sass-basic
cd sass-basic

npmを初期化する

次に、npmを初期化します。

npm init -y

これにより、package.jsonファイルが作成されます。

Sassをインストールする

Sassを開発用パッケージとしてインストールします。

npm install sass --save-dev

インストール後、package.jsonにsassが追加されます。

フォルダ構成を作成する

次のような構成を作成します。

sass-basic/
├── package.json
├── index.html
└── src/
    └── scss/
        └── style.scss

package.jsonにコンパイル用コマンドを追加する

package.jsonにSassをコンパイルするためのコマンドを追加します。

{
  "scripts": {
    "sass": "sass src/scss/style.scss dist/css/style.css",
    "sass:watch": "sass --watch src/scss/style.scss dist/css/style.css"
  },
  "devDependencies": {
    "sass": "^1.0.0"
  }
}

sassは一度だけコンパイルするコマンドです。

sass:watchはSCSSファイルの変更を監視し、保存するたびに自動でCSSへ変換するコマンドです。

HTMLファイルを作成する

HTMLからは、コンパイル後のCSSファイルを読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sass Basic</title>
  <link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
  <main class="main">
    <h1 class="main__title">Sassの基本</h1>
    <p class="main__text">SCSSで書いたスタイルをCSSに変換して表示します。</p>
  </main>
</body>
</html>

SCSSファイルを作成する

src/scss/style.scssにスタイルを書きます。

$main-color: #2563eb;
$text-color: #333;
$bg-color: #f5f7fb;

body {
  margin: 0;
  color: $text-color;
  background: $bg-color;
  font-family: sans-serif;
}

.main {
  max-width: 720px;
  margin: 80px auto;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
}

.main__title {
  margin: 0 0 16px;
  color: $main-color;
  font-size: 32px;
}

.main__text {
  margin: 0;
  line-height: 1.8;
}

Sassをコンパイルする

次のコマンドを実行すると、SCSSがCSSに変換されます。

npm run sass

dist/css/style.cssが生成されれば成功です。

開発中は、次のコマンドを使うと便利です。

npm run sass:watch

この状態では、SCSSファイルを保存するたびに自動でCSSが更新されます。

Sassの基本構文

ここからは、SCSSでよく使う基本構文を解説します。

変数

Sassでは、色やサイズなどの値を変数にできます。

変数は$を付けて定義します。

$main-color: #2563eb;
$base-padding: 24px;

.button {
  padding: $base-padding;
  background: $main-color;
  color: #fff;
}

変数を使うと、共通の値を一箇所で管理できます。

特に、サイト全体で使うメインカラー、文字色、余白、フォントサイズなどを管理すると便利です。

ネスト

Sassでは、セレクタを入れ子で書くことができます。

.card {
  padding: 24px;
  border: 1px solid #ddd;

  .card__title {
    margin: 0 0 12px;
    font-size: 24px;
  }

  .card__text {
    margin: 0;
    line-height: 1.8;
  }
}

このSCSSは、次のようなCSSに変換されます。

.card {
  padding: 24px;
  border: 1px solid #ddd;
}

.card .card__title {
  margin: 0 0 12px;
  font-size: 24px;
}

.card .card__text {
  margin: 0;
  line-height: 1.8;
}

ネストは便利ですが、深くしすぎると詳細度が高くなり、後から上書きしにくくなります。

基本的には、2階層程度までに抑えると管理しやすくなります。

親セレクタの参照

&を使うと、親セレクタを参照できます。

.button {
  display: inline-block;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;

  &:hover {
    background: #1d4ed8;
  }

  &--large {
    padding: 16px 32px;
    font-size: 18px;
  }
}

このSCSSは、次のようなCSSに変換されます。

.button {
  display: inline-block;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff;
  text-decoration: none;
}

.button:hover {
  background: #1d4ed8;
}

.button--large {
  padding: 16px 32px;
  font-size: 18px;
}

&:hoverのように擬似クラスを書く場合や、&--largeのようにBEMのModifierを書く場合によく使われます。

BEMについては、以下の記事も参考になります。

関連記事：BEMとは？CSS設計でよく使われる命名規則を解説

mixin

mixinは、複数のスタイルをまとめて再利用する機能です。

@mixinで定義し、@includeで呼び出します。

@mixin button-style {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.button-primary {
  @include button-style;
  background: #2563eb;
  color: #fff;
}

.button-secondary {
  @include button-style;
  background: #e5e7eb;
  color: #333;
}

ボタンの共通スタイルをmixinにまとめることで、重複したコードを減らせます。

引数付きmixin

mixinには引数を渡すこともできます。

@mixin button-style($bg-color, $text-color) {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: $bg-color;
  color: $text-color;
  text-decoration: none;
  font-weight: bold;
}

.button-primary {
  @include button-style(#2563eb, #fff);
}

.button-danger {
  @include button-style(#dc2626, #fff);
}

引数を使うと、共通の形を保ちながら、色やサイズだけを変更できます。

extend

@extendを使うと、既存のセレクタのスタイルを継承できます。

.message {
  padding: 16px;
  border-radius: 8px;
  font-weight: bold;
}

.message-success {
  @extend .message;
  background: #dcfce7;
  color: #166534;
}

.message-error {
  @extend .message;
  background: #fee2e2;
  color: #991b1b;
}

共通スタイルをまとめたい場合に便利ですが、出力されるCSSの構造が複雑になることがあります。

実務では、@extendよりもmixinを使った方が管理しやすいケースもあります。

演算

Sassでは、数値の計算もできます。

$base-size: 16px;

.box {
  padding: $base-size * 2;
  margin-bottom: $base-size;
  font-size: $base-size;
}

余白やサイズの基準値を決めておくと、デザイン全体の統一感を保ちやすくなります。

ファイル分割

Sassでは、用途ごとにファイルを分けて管理できます。

たとえば、次のような構成にできます。

src/
└── scss/
    ├── style.scss
    ├── _variables.scss
    ├── _base.scss
    └── _button.scss

ファイル名の先頭に_を付けたSCSSファイルは、単体ではCSSとして出力されません。

これらのファイルをstyle.scssに読み込んで使います。

@use "variables";
@use "base";
@use "button";

現在のSassでは、@importよりも@useの使用が推奨されています。

変数ファイルの例

_variables.scssには、共通で使う値をまとめます。

$main-color: #2563eb;
$text-color: #333;
$bg-color: #f5f7fb;
$base-width: 960px;

ベーススタイルの例

_base.scssには、bodyや見出しなどの基本スタイルをまとめます。

@use "variables";

body {
  margin: 0;
  color: variables.$text-color;
  background: variables.$bg-color;
  font-family: sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ボタンスタイルの例

_button.scssには、ボタンに関するスタイルをまとめます。

@use "variables";

.button {
  display: inline-block;
  padding: 12px 24px;
  background: variables.$main-color;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}

.button:hover {
  opacity: 0.8;
}

@useで読み込むときの注意点

@useで読み込んだファイル内の変数は、ファイル名を名前空間として指定します。

たとえば、variables.scssの$main-colorを使う場合は、次のように書きます。

@use "variables";

.title {
  color: variables.$main-color;
}

これにより、どのファイルの変数を使っているのかがわかりやすくなります。

Sassを使うときの注意点

Sassは便利ですが、使い方を誤るとCSSが複雑になることがあります。

ネストを深くしすぎない

ネストを深くすると、出力されるCSSのセレクタが長くなります。

.header {
  .nav {
    .nav__list {
      .nav__item {
        .nav__link {
          color: #333;
        }
      }
    }
  }
}

このような書き方は、後から修正しづらくなります。

できるだけシンプルなクラス名で管理することが大切です。

変数名をわかりやすくする

変数名は、役割がわかる名前にします。

$main-color: #2563eb;
$text-color: #333;
$border-color: #ddd;

反対に、次のような名前は意味が伝わりにくくなります。

$blue: #2563eb;
$gray1: #333;
$gray2: #ddd;

色名だけでなく、どの役割で使う色なのかを表すと管理しやすくなります。

コンパイル後のCSSをHTMLで読み込む

HTMLで読み込むのは、SCSSファイルではなくCSSファイルです。

<link rel="stylesheet" href="dist/css/style.css">

SCSSファイルを直接読み込んでも、ブラウザでは反映されません。

CSSの基礎理解も重要

SassはCSSを便利に書くための道具です。

そのため、CSSのセレクタ、詳細度、継承、ボックスモデル、レスポンシブ対応などの基礎が重要です。

Sassを使っても、最終的に出力されるのはCSSです。CSSの仕組みを理解しておくことで、Sassもより効果的に使えます。

関連記事：CSSのセレクタとは？基本の種類と指定方法を解説

SassとViteを組み合わせる方法

Viteなどの開発環境を使う場合も、Sassを利用できます。

Viteでは、SassをインストールしておくことでSCSSファイルを扱えるようになります。

npm install sass --save-dev

その後、JavaScriptファイルからSCSSを読み込めます。

import "./scss/style.scss";

console.log("Sass is working.");

Viteの基本を確認したい場合は、以下の記事も参考になります。

関連記事：Viteとは？初心者向けに特徴や使い方を解説

Sassはどのような場面で使うべきか

Sassは、小規模なページから中規模以上のサイト制作まで幅広く使えます。

特に、次のような場合に役立ちます。

CSSの量が多いサイト

ページ数が多いサイトでは、CSSの管理が複雑になりやすくなります。

Sassでファイルを分割すると、パーツごとに整理しやすくなります。

共通パーツが多いサイト

ボタン、カード、見出し、フォームなど、同じようなパーツを複数ページで使う場合、mixinや変数が役立ちます。

色や余白を統一したいサイト

サイト全体のデザインルールを変数で管理すると、修正や調整がしやすくなります。

Sassを学ぶ順番

Sassは、次の順番で学ぶと理解しやすくなります。

  1. CSSの基本を理解する
  2. SassとSCSSの違いを理解する
  3. 変数を使う
  4. ネストを使う
  5. mixinを使う
  6. ファイル分割を覚える
  7. 実際のサイト制作で使う

最初からすべての機能を使う必要はありません。

まずは、変数とファイル分割から使い始めると、Sassの便利さを実感しやすくなります。

まとめ

Sassは、CSSを効率よく書くための拡張言語です。

特にSCSS記法は通常のCSSに近いため、初心者でも学びやすい書き方です。

Sassを使うと、変数、ネスト、mixin、ファイル分割などの機能によって、CSSを整理しながら管理できます。

ただし、SassはCSSの代わりではなく、CSSをより書きやすくするための道具です。最終的にはCSSとして出力されるため、CSSの基本理解も欠かせません。

まずは、変数とファイル分割から取り入れ、慣れてきたらmixinや@useを活用すると、保守しやすいスタイル管理につながります。

関連記事

CSSの基本と仕組みを理解する｜見た目を制御する仕組みを体系的に解説

CSSセレクタとは？種類と使い方をわかりやすく解説

CSS設計とは？保守しやすいスタイルを書く基本を解説

BEMとは？CSS設計でよく使われる命名規則を解説

npmとは？初心者向けに使い方をわかりやすく解説

Viteとは？初心者向けに特徴や使い方を解説

Node.jsとは？基本からわかりやすく解説