【初心者向け】いまさら聞けないSCSS入門｜Sassとの違いと使い方をやさしく解説

web制作の現場では「SCSSを使うのが当たり前」という時代になっています。
ですが、いざ学ぼうとすると「Sassって何？」「CSSとどう違うの？」「導入が難しそう…」と感じる方も多いのではないでしょうか。

この記事では、CSSしか触ったことのない方でも理解できるように、SCSSの基本・Sassとの違い・導入方法・よく使う書き方を実例つきで解説します。

SCSSとは？CSSをもっと便利にするための言語

まずは「SCSSとは何か」をシンプルに押さえましょう。SCSS（エスシーエスエス）は、CSSをより効率的・スマートに書くための拡張言語です。

見た目はCSSにとても似ていますが、SCSSでは以下のような便利なことができます。

• 変数で色や数値をまとめて管理できる
• HTML構造に沿って入れ子（ネスト）で書ける
• 計算や条件分岐もできる
• コードをパーツ化して再利用できる

つまり、SCSSは「CSSをプログラムのように管理できるようにしたもの」と考えるとわかりやすいです。

最終的にはブラウザが理解できる普通のCSSファイルに変換（コンパイル）されるので、見た目や動作は通常のCSSとまったく同じです。

SassとSCSSの違いとは？

「SassとSCSSってどう違うの？」という質問はよくあります。
実はこの2つ中身は同じSass言語ですが、書き方のルール（記法）が違うだけなんです。

Sass（インデント記法）

Sassは初期に登場した古い記法で、波かっこ {} やセミコロン ; を使いません。Pythonのようにインデント（字下げ）で構造を表します。

.main
  color: #333
  font-size: 16px

コードがスッキリしますが、インデントのズレでエラーになりやすく初心者には少し扱いづらいのが難点です。

SCSS（Sassy CSS 記法）

後から登場したのがSCSSです。こちらはCSSの書き方とほぼ同じで、波かっことセミコロンを使います。

.main {
  color: #333;
  font-size: 16px;
}

見慣れた書き方なので、CSSを知っている人なら違和感なく使えます。そのため、現在主流なのはSCSS記法です。

Sass＝言語の名前、SCSS＝その中の書き方の1つ、という理解でOKです。

SCSSを使う3つのメリット

SCSSを導入する一番の理由は、「CSSをもっと楽に、効率よく管理できるようになる」という点です。
単純に書き方が変わるだけでなく、作業スピードや保守性、チーム開発でｓの共有が格段に向上します。

ここでは、特に初心者でもすぐに効果を実感できる以下の3つのメリットを、実際のコード例と一緒に解説します。

変数でスタイルを一元管理できる

CSSでは同じ色やサイズを複数箇所に書くことがよくあります。でも、デザイン変更があったときに全部修正するのは大変ですよね。

SCSSなら、変数でまとめて管理できます。

$main-color: #007bff;
$font-size-base: 16px;

.title {
  color: $main-color;
  font-size: $font-size-base;
}

.button {
  background: $main-color;
}

.title {
  color: #007bff;
  font-size: 16px;
}

.button {
  background: #007bff;
}

このように $main-color という変数を定義しておけば、色を変えたいときは1か所の値を変更するだけなのでデザイン変更が圧倒的に楽になります。

ネスト構造で見やすく整理できる

CSSだと同じブロックに関するクラスを分けて書く必要があります。

.header {}
.header .logo {}
.header nav {}
.header nav a {}

これがSCSSならこう書けます。

.header {
  background: #f5f5f5;


  .logo {
    width: 120px;
  }


  nav {
    a {
      color: #333;


      &:hover {
        color: #007bff;
      }
    }
  }
}

見た目がHTMLの構造に近いため、可読性が格段に上がります。どの要素の中にあるスタイルなのかが一目でわかり、コード整理も簡単です。

コードの再利用ができる

共通のスタイルを何度も書くと、CSSはどんどん長くなります。SCSSでは「ミックスイン（@mixin）」を使って共通パターンを部品化できます。

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
  height: 200px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

まとめ

SCSSは一見難しそうですが、実際はCSSを少し便利にするだけのシンプルな仕組みです。最初から全部を覚える必要はなく、まずは次の2つだけでも大きく変わります。

• $変数 で色やサイズをまとめる
• .親 { .子 { ... } } のネストで見やすくする

これだけでCSSの書き方が整理され、デザイン変更にも強くなります。

小さなサイトでもすぐに取り入れられるので、まずはVS Code + Live Sass Complierを使って試してみてください。

本記事の監修者

ピークスマーケティング株式会社 代表取締役
小森 健

大手広告代理店（東証プライム）でマーケティングやクリエイティブ作成を担当。
HP制作やLP制作、EC構築、デジタルマーケティングを得意領域とし、企画デザインからサイト実装まで一貫して対応可能なのが強み。
10年以上IT業界にいる知見を活かし、本サイトを運営。