WEB 2025.12.17

Sass / SCSS を使わずに CSS だけで開発するのはアリなのか？

時々、Sass や SCSS を使わずに、CSS のみで開発している人に出会うことがあります。
一方で近年は「CSS が進化したから Sass は不要」という意見も見かけるようになりました。

本記事では、実務開発の視点から「CSSオンリー開発は本当に問題ないのか」を整理します。

CSSは進化したが、実務ではSassを使う理由がある

結論を先に述べます。

CSSだけで問題なく成立するケースは確実に増えている
ただし、中〜大規模サイトや継続運用を前提とした案件では、Sassを使うメリットは依然として大きい

これは思想や好みではなく、設計・保守・運用コストの観点での話です。

CSSが「単体でもいける」と言われるようになった背景

ここ数年で CSS 自体は大きく進化しました。

CSS変数（Custom Properties）

:root {
  --color-primary: #0055cc;
  --space-md: 16px;
}

変数管理がネイティブで可能
JavaScript からも参照できる

単純な色・余白管理であれば十分実用的です。

ネイティブネスト

.card {
  padding: 16px;

  & .title {
    font-weight: bold;
  }
}

Sass に近い記法が使えるようになった
ただし記述ルールや制約はまだ多い

clamp / min / max / calc

font-size: clamp(14px, 2vw, 18px);

レスポンシブ対応の数式表現が、CSSのみで書きやすくなりました。

@layer によるレイヤー管理

@layer base, components, utilities;

CSS設計のレイヤー概念をネイティブで表現できます。

CSSだけで開発しても問題ないケース

以下の条件が揃う場合、CSSオンリーは合理的な選択になります。

小規模サイト・LP
デザインバリエーションが少ない
再利用コンポーネントがほぼない
短期・単発案件
ビルド環境を極力持ち込みたくない

「速く作って、役目を終える」タイプの案件では有効です。

Sassを使う際のデメリット

Sass を採用する場合、いくつかのデメリットも存在します。

Sass / SCSS を利用するには、ビルド環境（Node.js など）が必要になる
ローカルに開発環境を構築できない人にとっては、修正のハードルが上がる
「CSS ファイルを直接編集する」運用ができなくなる

つまり、誰でも即座に修正できる状態ではなくなるという点は、明確なデメリットです。

補足：フロントエンド全体の前提が変わっている

近年のフロントエンド開発では、CSS に限らず JavaScript も含めてビルド前提の構成が一般的になっています。

JavaScript はライブラリやフレームワークを利用することが増えた
TypeScript の採用によりトランスパイル工程が必要
バンドラ（Webpack / Vite など）による最適化が前提になっている

このように、CSS だけが特別に「ビルド不要」であることを前提にする設計自体が、現実とズレ始めているとも言えます。

実務開発でSassが有効な理由

ミックスインによる共通化

@mixin mq($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

ブレイクポイント管理の一元化
記述ルールの統一
修正コストの低減

CSSのみでは、この共通化を仕組みとして担保するのが難しくなります。

設計を構造として維持できる

Sass では、

partial 分割
変数・関数・mixin の管理
ファイル依存関係の明確化

といった設計をコード構造として維持できます。

引き継ぎ・保守対応に強い

他の制作者が触る
数ヶ月後に自分が保守対応する

こうしたケースでも、構造化された Sass は把握しやすく、修正リスクを下げられます。

また、変数・mixin・構造が整理されていることで、
新規実装やデザイン調整の際も「考える量」が減り、結果として 日々の開発自体が楽になる という側面もあります。

これらのメリットは必須ではありませんが、
中長期で運用されるサイトや、複数人が関わる案件においては、十分に採用理由になり得ます。

ビルド環境が必要になるというデメリットを理解した上で、それを上回る形で
「設計を維持できる」「変更に耐えられる」というメリットを得られる点が、Sass 採用の本質です。

実務的な現実解

CSS と Sass は対立関係ではありません。

Sass：設計・構造・共通化
CSS：表現力・最新仕様

以下のような使い分けが現実的です。

計算系は clamp() を積極的に使用
色は CSS変数 + Sass変数を併用
レイヤー管理は @layer を Sass 内で活用
ネストは Sass を基本とする

まとめ

CSSだけでも開発できる場面は増えている
しかし、実務・継続運用では Sass が依然として有効
案件規模や運用期間に応じて使い分けることが重要

CSS の進化を取り入れつつ、Sass の強みを活かす。
それが現時点での最も現実的な選択と言えるでしょう。