SCSS整形ツール：Sassのコードをオンラインで整形

SCSS整形ツールでできること

SCSS では、ルールをネストしたり、値を $variables に入れたり、@mixin でブロックを使い回したり、設定をマップにまとめたりできます。便利な反面、ファイルはすぐに大きくなり、複数人で同じスタイルシートを編集するうちにインデントがずれていきます。ある人は color:$brand と書き、別の人は color : $brand ; と書き、ネストしたブロックの深さもばらばらになります。

このツールは SCSS を整形し直して、ネストの各階層を同じようにインデントし、宣言を1行に1つずつ並べ、コロンや波かっこの周りのスペースをそろえます。SCSS パーサーを使った Prettier 3 を、すべてブラウザ内で動かしています。

使い方

左のボックスに SCSS を貼り付けます。貼り付けた瞬間に整形されます。
ファイルを開く で .scss ファイルを読み込んだり、サンプル で例を表示したりすることもできます。
インデント を選びます：スペース2つ、スペース4つ、タブのいずれかです。
行の幅 を選びます。長いセレクタのリスト、マップ、include の引数は、この幅を超えると折り返されます。
スタイルガイドでシングルクォートを使う決まりなら、シングルクォート をオンにします。
整形を押すか、入力欄で Ctrl+Enter を押します。
コピー を押すか、ダウンロード で .scss ファイルとして保存します。

一度整形すると、その後は入力の変更に合わせて出力が更新されます。問題があると、ボックスの下に 2行目、3列目：Unclosed block のようなメッセージが表示され、入力欄で表示 を押すとその箇所にカーソルが移動します。

整形前と整形後

変数、mixin、ネストしたルールを含む、詰め込まれた SCSS です。

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

スペース2つで整形した結果です。

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

ネストが1段深くなるごとにインデントが1つ増えるので、&:hover が .nav の中のリンクに属していることがひと目でわかります。

Sass のマップは複数行に展開され、1行に1つのキーが並びます。

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

シングルクォート をオンにすると、@use "sass:math"; は @use 'sass:math'; になります。行コメントは元の位置にそのまま残ります。

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

エラーと制限事項

整形して書き出す前に、ファイルを解析する必要があります。最もよくある問題は閉じ波かっこの書き忘れです。次の入力の場合：

.nav {
  a { color: red;

メッセージは 2行目、3列目：Unclosed block となり、閉じられていない a { を指します。

知っておきたい点は次のとおりです。

このツールがチェックするのは構文で、意味まではチェックしません。未定義の変数や存在しない mixin は報告されません。それは Sass コンパイラが見つけてくれます。
プロパティの並べ替えやセレクタのソートは行いません。書いた順序がそのまま残ります。
インデント構文の .sass には対応していません。先に SCSS に変換するか、対応しているエディタで整形してください。
このページには圧縮がありません。ブラウザが実行するのは CSS だけなので、SCSS を圧縮しても意味がないからです。Sass でコンパイルしてから、出力された CSS を圧縮してください。

SCSS をきれいに保つコツ

ネストは浅く保ちましょう。深いネストは長くて壊れやすいセレクタを生むため、スタイルガイドでは3階層までとすることがよくあります。
変数とマップは _tokens.scss のような別のパーシャルにまとめ、@use で読み込みます。
コミットする前に整形しましょう。そうしないと、細かいスペースの変更が本当の変更と混ざってコードレビューに出てきてしまいます。
出力された通常の CSS を扱うなら、CSS整形ツールで圧縮もできます。

SCSS を整形するほかの方法

VS Code：Prettier 拡張機能を入れてファイルを開き、「ドキュメントのフォーマット」（Windows は Shift+Alt+F、macOS は Shift+Option+F）を実行します。
コマンドライン：npx prettier --write "src/**/*.scss" で、フォルダ内のすべての SCSS ファイルを整形できます。
WebStorm などの JetBrains 製 IDE には、コードを再フォーマットする機能が組み込まれており、プロジェクトに Prettier が入っていればそれを使うこともできます。

このページは設定が不要で、コードは手元の端末から出ません。チケットに貼られたスニペット、CodePen、チームメンバーから届いたコードをさっと整えたいときに便利です。これらのスタイルを使うマークアップには HTML整形ツールを、スクリプトには JavaScript整形ツールをお試しください。

SCSS整形ツールのよくある質問

SCSS と Sass の違いは何ですか？

どちらも Sass という言語の書き方（構文）です。SCSS は CSS と同じく波かっことセミコロンを使うので、どんな CSS ファイルもそのまま正しい SCSS になります。古いインデント構文は .sass として保存され、波かっこの代わりにインデントを使います。この整形ツールが読み込めるのは SCSS だけです。

SCSS を CSS にコンパイルできますか？

いいえ。変えるのはレイアウトだけです：インデント、スペース、改行。変数、mixin、ネストはそのまま残ります。CSS が必要な場合は Sass コンパイラを実行してください。たとえば npx sass input.scss output.css のように使います。

「圧縮」ボタンがないのはなぜですか？

ブラウザは SCSS を読めないので、SCSS を圧縮しても使い道がないからです。まず CSS にコンパイルし、その CSS をビルドの中で圧縮するか、このサイトの CSS整形ツールで圧縮してください。

// のコメントは残りますか？

はい。// の行コメントも /* ブロックコメント */ も、元の位置に残ります。