Sassとは (CSSとの違い)

nas2025/10/15

目次

・SassとCSSの違いのまとめ

・SCSSとCSSの変数の例

・SCSSのネストの例

・SCSSのミックスイン (Mixins)の例

・SCSSの継承 (Extend)の例

・SCSSの演算の例

SassとCSSの違いのまとめ

役割 実行環境 拡張子
Sass CSSを効率よく書くための拡張 コンパイルしてCSSに変換 .scss または .sass
CSS スタイルを指定する言語 ブラウザ .css

Sass「サス」は、CSSを効率的に書けるようにした拡張言語です。

特に大規模なプロジェクトにおいてスタイルシートの記述と管理を大幅に改善できます。

使用にはコンパイルが必要です。

Sass (.scss)
↓ コンパイル
CSS (.css)
↓
ブラウザ

Sassの記法について

Sassには2種類の記法があります。

SCSS
拡張子は .scss。		 CSSとほぼ同じ構文（波括弧 {} とセミコロン ; を使用）で記述できるため、CSSに慣れている人にとって学習コストが低く、現在の主流です。
Sass
拡張子は .sass。		 波括弧 {} とセミコロン ;を省略し、インデント（字下げ）によって階層構造を表現する、より簡略化された記法です。

SCSSとCSSの変数の例

SCSSの変数

$main-color: #3498db;
$padding: 12px;

.button {
  background-color: $main-color;
  padding: $padding;
  color: white;
}

変数は、$で定義します。
ビルド時に値が確定します。
ブラウザに変数は残りません。

CSSの変数

:root {
  --main-color: #3498db;
  --padding: 12px;
}

.button {
  background-color: var(--main-color);
  padding: var(--padding);
  color: white;
}

変数は、--変数名で定義します。
var()で使用します。
実行時（ブラウザ上）に値が決まります。
ブラウザに変数が残ります。

SCSSのネストの例

ネスト（入れ子） (Nesting)は、HTMLの階層構造に合わせて、CSSセレクタを入れ子にして記述できます。

メリット: 親子関係が視覚的にわかりやすくなり、セレクタの記述を短縮できます。

&（親セレクタ）の例

.button {
  background: blue;
  color: white;

  &:hover {
    background: red;
  }
}

上記をCSSにすると以下になります。

.button {
  background: blue;
  color: white;
}

.button:hover {
  background: red;
}

SCSSのミックスイン (Mixins)の例

ミックスイン (Mixins)は、再利用したい一連のスタイルをまとめて定義し、必要な場所で呼び出して使用できます。

メリット: コードの重複を減らし、メンテナンス性を向上させます。

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

.button {
  @include center;
}

上記をCSSにすると以下になります。

.button {
  display: flex;
  justify-content: center;
  align-items: center;
}

SCSSの継承 (Extend)の例

あるセレクタで定義されたスタイルを、別のセレクタに引き継ぐことができます。

メリット: スタイルの共通化を図り、コンパイル後のCSSを効率化できます。

%placeholderの例

%button-base {
  padding: 8px 16px;
  border-radius: 4px;
}

.button {
  @extend %button-base;
}

.button--danger {
  @extend %button-base;
  background: red;
}

%で始まるのはプレースホルダーセレクタです。
単体ではCSSに出力されません。
@extendで中身を継承します。

上記をCSSにすると以下になります。

.button,
.button--danger {
  padding: 8px 16px;
  border-radius: 4px;
}

.button--danger {
  background: red;
}

SCSSの演算の例

SCSSの演算

$base-padding: 16px;

.box {
  padding: $base-padding * 2;
  margin: $base-padding / 2;
  width: 100% - 20px;
}

数値＋単位をそのまま計算します。
ビルド時に値が確定します。
ブラウザに計算は残りません。

CSSの演算

.box {
  padding: calc(16px * 2);
  margin: calc(16px / 2);
  width: calc(100% - 20px);
}

必ずcalc()を使います。
実行時にブラウザが計算します。
%/vw/vhなどと混在可能です。

Saas公式ページ
https://sass-lang.com/

関連の記事

SassでCSSを作成するサンプル

△上に戻る