CSS / SCSS / LESS の違いと整形時の注意｜CreaTools

まず「どれで書かれているか」を見分ける

CSS Formatter の「言語」設定で迷うのは、入力CSSがどのプリプロセッサで書かれているかわからないとき。以下のキーワードで判別できます:

見つけたら	言語
`$variable`	SCSS
`@variable:`	LESS
`@mixin` / `@include`	SCSS
`.mixin();`	LESS
`&__element`	SCSS / LESS（ネスト）
`--variable`	プレーンCSS（CSS変数）
いずれもない	プレーンCSS

3言語の決定的な違い

SCSS（Sass）

最も普及しているCSSプリプロセッサ。

$primary: #3b82f6;

.btn {
  background: $primary;
  &:hover {
    background: darken($primary, 10%);
  }
}

変数: $name
関数: darken(), lighten(), mix() など組み込み多数
ネスト・mixin・関数定義を持つ
SassとSCSSは同じエンジンで構文が違うだけ（SCSSはCSS互換、Sassはインデント形式）

LESS

CSSにより近い構文を持つプリプロセッサ。Bootstrap 3まで採用されていた。

@primary: #3b82f6;

.btn {
  background: @primary;
  &:hover {
    background: darken(@primary, 10%);
  }
}

変数: @name（CSSの @media と紛らわしい）
ネスト・mixin・関数定義を持つ
一見SCSSに似ているが、変数記号が違うため混在不可

プレーンCSS

:root {
  --primary: #3b82f6;
}

.btn {
  background: var(--primary);
}

変数: --name（CSSカスタムプロパティ、ブラウザ標準）
ネスト: 2023年に標準化済み（モダンブラウザで動く）
mixin・関数定義: 不可

整形時に「言語」を間違えるとどうなるか

LESSをCSSとして整形

@primary: #3b82f6;
.btn { color: @primary; }

これをCSSとして整形すると、Prettierは @primary を未知のat-rule として扱おうとします。多くの場合エラーは出ませんが、空白の入り方が想定と異なります。素直にLESSを選ぶのが安全です。

SCSSをCSSとして整形

$primary のような行があると、PrettierのCSSパーサが構文エラーを返すことがあります。

CSSをSCSS / LESS として整形

CSSはSCSS / LESS の上位互換的な扱いができるため、SCSSやLESSを選んでもプレーンCSSは整形できます。判別がつかないならSCSSを選んでおくと安全。

推奨設定

入力	推奨「言語」
`$` 変数を含む	SCSS
`@` で始まる変数（`@media` でなく `@primary` のような）	LESS
ネストのみで変数なし	SCSS（CSSでもOK）
プレーンCSS	CSS
判別がつかない	SCSS（互換性が広い）

圧縮時の言語選択

CSS Formatter の圧縮はregex方式で言語によらず同じ処理になります。「言語」設定は整形時のみ有効です。

ただし、SCSS / LESS の特殊構文（ネスト、変数）はそのまま圧縮されると最終CSSとしては動きません。SCSS / LESS は本来 sass や lessc でCSSに変換してから配信するため、本ツールでの圧縮はソースを縮める用途ではなく整形チェック用と割り切ってください。

ネストの扱い（重要）

SCSS / LESS のネスト

.card {
  .title {
    color: red;
  }
}

これはコンパイル後 .card .title { color: red; } になります。

CSSの標準ネスト（2023〜）

.card {
  & .title {
    color: red;
  }
}

CSSでも & 付きでネストできるようになりましたが、SCSSの記法とは細部が異なります（CSSの方は & 必須）。Prettierで整形すると差が見えます。

CSS Formatterの使い方 — 操作の入門
CSS minifyの仕組み — 圧縮で何が削られるか

迷ったらSCSSを選べば、たいていの入力で破綻しません。