SCSSとは何ですか？

SCSSはSassのCSS互換記法（Sassy CSS）です。通常のCSSの構文をそのまま使いながら、変数・ネスト・ミックスイン・関数等のSass機能を利用できます。.scssファイルとして記述し、CSSにコンパイルして使用します。

SCSS | 用語集 | IT/AIエンジニア　野口真一

Q: SCSSとSassの違いは？

SCSSはCSS互換の波括弧記法（.scss）、Sassはインデントベースの記法（.sass）です。機能は同一ですが、SCSSの方がCSSとの互換性が高く、学習コストが低いため広く採用されています。

この用語をシェア

概要

SCSS（Sassy CSS）は、Sassの2つの記法のうちの1つで、CSS互換性を持つ構文形式です。通常のCSSコードをそのまま有効なSCSSコードとして扱えるため、既存のCSSプロジェクトにSassの機能を段階的に導入することができます。

SCSSは波括弧（{}）とセミコロン（;）を使用するCSS風の記法を採用しており、多くのWeb開発者にとって親しみやすい構文となっています。.scss拡張子のファイルで保存され、Sassコンパイラによって通常のCSSに変換されます。

基本的な使い方

SCSSはCSSと同じ構文を使いながら、Sassの強力な機能を利用できます：

// 変数定義（CSSカスタムプロパティとは異なる）
$primary-color: #007bff;
$font-size-base: 16px;
$border-radius: 0.375rem;

// ネスト記法
.card {
  background: white;
  border-radius: $border-radius;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .card-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    
    h3 {
      margin: 0;
      font-size: $font-size-base * 1.25;
      color: $primary-color;
    }
  }
  
  .card-body {
    padding: 1rem;
    
    p {
      margin-bottom: 1rem;
      line-height: 1.6;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

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

// ミックスイン使用
.button {
  @include flex-center;
  padding: 0.5rem 1rem;
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

主な機能

CSS互換性：既存のCSSコードをそのまま使用可能で段階的な移行が容易
変数機能：$記号を使った変数定義と参照でコードの再利用性向上
ネスト記法：HTMLの構造に合わせてCSSを階層化して記述
ミックスイン：@mixinと@includeでスタイルブロックの再利用
継承機能：@extendによる他のセレクタスタイルの継承
演算機能：数値計算、色操作、文字列操作をサポート
制御構文：@if、@for、@while、@eachによる条件分岐とループ

メリット

学習コストが低い：CSS知識があれば容易に習得可能
既存プロジェクトとの親和性：CSSファイルをそのまま.scssに変更可能
チーム開発に適している：CSS経験者なら誰でも理解しやすい構文
豊富なツールサポート：多くのエディタやビルドツールで対応済み
保守性向上：変数やミックスインにより一貫性のあるスタイル管理
開発効率向上：繰り返しコードの削減と構造化されたコード
大規模開発対応：ファイル分割と@importによるモジュール化

デメリット

コンパイルが必須：ブラウザはSCSSを直接解釈できず、CSSへのビルド工程が常に必要になる
ネストの濫用リスク：階層を深くしすぎると詳細度が上がり、CSSの上書きが難しくなる
デバッグの一手間：ブラウザの開発者ツールに表示されるのはコンパイル後のCSSのため、元のSCSSとの対応をソースマップで確認する必要がある
モダンCSSとの機能重複：ネイティブCSSがネスト構文やカスタムプロパティに対応してきたため、シンプルな用途ではSCSSが不要なケースも増えている

類似技術との違い（SCSSとSass記法・PostCSS）

SCSSはSassが持つ2つの構文のうち、CSS互換のブレース記法です。もう一方のインデント記法（.sass）とは書き方が異なるだけで、機能やコンパイル結果は同じです。

項目	SCSS（ブレース記法）	Sass（インデント記法）	PostCSS
拡張子	.scss	.sass	.css（プラグインで拡張）
構文	CSSと同じ波括弧・セミコロン記法	波括弧・セミコロンなし、インデントで階層表現	標準CSS＋プラグインによる機能追加
CSSとの互換性	あり（既存CSSがそのまま有効）	なし（独自インデント構文）	あり（標準CSS構文）
普及度	Sass利用者の大半が採用	少数派	モダンCSS移行の文脈で採用増加

既存のCSS資産をそのまま活かして段階的に移行できる点が、SCSSがSassのインデント記法よりも広く普及している主な理由です。もう一方の記法について詳しくはSassのページをご覧ください。

実務での活用シーンと導入時の注意点

SCSSはBootstrapやFoundationなど主要CSSフレームワークのソースにも採用されており、デザインシステムのトークン管理やコンポーネント単位のスタイル設計で広く使われています。既存のCSSファイルを拡張子変更だけで.scssに移行できる手軽さも実務での採用理由の一つです。

段階的な移行：既存の.cssファイルを.scssにリネームするだけで動作するため、小さく始められる
ネスト階層のルール化：3〜4階層を上限の目安とし、詳細度の肥大化を防ぐ
パーシャルファイルの分割：_variables.scss等に分割し、@useでモジュール化する
ビルドパイプラインの整備：Vite・Webpack等のscss-loaderを事前に設定し、CI上でもコンパイルエラーを検知できるようにする

外部リンク

Sass/SCSS公式サイト

よくある質問（FAQ）

Q. SCSSとは？

SassのCSS互換記法です。CSSの構文でSass機能（変数・ネスト・ミックスイン）を利用できます。

Q. SCSSとSassの違いは？

SCSSは波括弧記法（.scss）、Sassはインデント記法（.sass）です。機能は同一でSCSSの方が広く使われています。

Q. 既存のCSSファイルをSCSSに移行するには？

拡張子を.cssから.scssに変更するだけで、そのまま有効なSCSSファイルとして動作します。そこから変数化やネストへの置き換えを段階的に進められるのがSCSSの大きな利点です。

Q. Tailwind CSSを使えばSCSSは不要になりますか？

用途が異なるため一概には言えません。Tailwindはユーティリティクラスでの高速な実装に強く、SCSSはデザインシステムの変数管理や複雑な条件分岐に強みがあります。プロジェクトによっては併用も可能です。

この用語についてもっと詳しく

SCSSに関するご質問や、システム導入のご相談など、お気軽にお問い合わせください。

お問い合わせサービス一覧

SCSS