CSSとは？SCSSとの違いと導入方法をやさしく解説【2025年最新版】

「CSSは知ってるけど、SCSSって何？」と感じたことはありませんか？
Web制作の現場では、効率的で管理しやすいスタイルシートを書くためにSCSSが広く使われています。

本記事では、CSSとSCSSの違いや、SCSSを導入するメリット、基本的な使い方まで、初心者の方にもわかりやすく解説しています。

Web制作の基礎知識を深めたい方は必見です！

この記事をオススメしたい方

CSSの基礎はわかるけど次のステップに進みたい人
Web制作を効率化したいと考えている初学者
デザインやコーディングの自由度を高めたい人
ポートフォリオサイトを整えたいフリーランス志望の人
フロントエンドエンジニアを目指している方

INDEX

1 CSSとは？基本の役割をおさらい
2 SCSSとは？Sassとの違いも解説
3 CSSとSCSSの主な違い
4 SCSSを使うメリット3選
5 SCSSの導入方法【初心者向けステップ】
6 よく使うSCSSの基本構文と書き方例
7 SCSSの注意点とデメリット
8 まとめ：どちらを使うべき？
9 おすすめの学習リソース・ツール紹介

CSSとは？基本の役割をおさらい

CSS（Cascading Style Sheets）は、HTMLで作られたWebページの見た目を整えるためのスタイル指定言語です。テキストの色やサイズ、レイアウトの配置、背景画像など、ユーザーが目にするデザイン部分を制御できます。

基本的には「セレクタ（どこに）」「プロパティ（何を）」「値（どうする）」という構成で記述します。

たとえば、以下のように記述します：

h1 {
color: red;
font-size: 24px;
}

これは「h1タグのテキストを赤色・24pxサイズにする」という意味です。CSSの習得はWeb制作の第一歩とも言える重要なスキルです。

SCSSとは？Sassとの違いも解説

SCSSは、CSSをより効率的に、読みやすく、管理しやすくするために開発された拡張言語「Sass」の記法の一つです。Sassには2つの記法がありますが、SCSSはCSSと互換性が高く、現在では主流になっています。

Sass（インデント型）：記号を省略し、インデントで階層を表現
SCSS（CSSライク型）：中カッコやセミコロンを使用

CSSがそのまま動くのに加え、SCSSでは「変数」や「関数」「ミックスイン」などのプログラミング的な書き方が可能になり、大規模サイトでもコードを整理しやすくなります。

CSSとSCSSの主な違い

機能	CSS	SCSS
変数	×	◯
ネスト	×	◯
ミックスイン（mixin）	×	◯
関数	×	◯
インポート	×	◯
継承	×	◯

たとえば、SCSSでは以下のようにネスト構造が使えます。

nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}

CSSでは階層が深くなるほどクラス名を冗長に書く必要がありますが、SCSSなら構造が整理されて読みやすくなります。

SCSSを使うメリット3選

保守性の向上
同じ値を何度も書かなくてよいので、修正が楽になります（例：$main-color = #333）
可読性アップ
ネスト構造により、スタイルの対象がひと目でわかります
再利用性の高さ
mixinや関数などを使えば、スタイルを部品化して複数箇所で利用可能

これらは特にチーム開発や複数ページに渡る大型サイトで効果を発揮します。

SCSSの導入方法【初心者向けステップ】

Node.jsをインストール
https://nodejs.org/ja にアクセス
Sassをインストール
ターミナルで npm install -g sass
SCSSファイルを作成
style.scss のように命名
CSSに変換（コンパイル）

sass style.scss style.css

Visual Studio Codeを使用しているなら「Live Sass Compiler」という拡張機能を使えば自動でコンパイルも可能です。

よく使うSCSSの基本構文と書き方例

// 変数
$main-color: #3498db;

// ミックスイン
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// ネスト
header {
  background: $main-color;
  nav {
    ul {
      li {
        a {
          color: white;
        }
      }
    }
  }
}

// 継承
%btn-base {
  padding: 10px 20px;
  border-radius: 5px;
}
.button {
  @extend %btn-base;
  background-color: green;
}