CSS ツール

オールインワンの CSS ツールボックス：整形/ビューティファイ、ミニファイ/圧縮、構文検証、SCSS/Sass ＆ LESS の CSS へのコンパイル、そして CSS から SCSS または LESS への逆変換。
すべての処理はブラウザー内でローカルに行われます — データがサーバーへアップロードされることはありません。
モード：
入力 CSS / SCSS / LESS / SASS
出力
使い方：CSS/SCSS/LESS/SASS を左のテキストエリアに貼り付け、モードを選び、処理をクリックします（またはそのまま入力 — 入力時に自動処理されます）。
各モードの仕組み
CSS 整形：一貫したインデント（2/4 スペースまたはタブ）、1 行 1 プロパティで CSS を整形します。@media、@keyframes、@supports のようなネストした at-rule に対応します。コメント（/* */ と単行の両方）を保持します。インデントセレクターで 2 スペース、4 スペース、タブを切り替えられます。
ミニファイ：不要な空白、コメント、冗長文字をすべて取り除き、最もコンパクトな CSS を生成します。ファイルサイズと帯域を減らす本番デプロイに最適です。統計バーで圧縮率を確認できます。
検証：CSS を解析して構文エラーをチェックします。解析エラーを行番号と列番号で正確に報告します。統計も表示します：ルール数、セレクター数、宣言数、at-rule 数。
SCSS 整形：一貫したインデントで SCSS/Sass スタイルシートを再整形します。$variables、@mixin/@include、@extend、@if/@for/@each 制御フロー、#{$var} 補間、// 単行コメントなど、SCSS 固有の構文すべてに対応します。ネストしたセレクタ構造を保持し、ネストブロックを正しくインデントします。インデントセレクターを変更すると、2 スペース、4 スペース、タブを切り替えられます。
LESS 整形：一貫したインデントで LESS スタイルシートを再整形します。@variables、パラメータ付き mixin、ガード（when）、@{var} 補間、マージ、// 単行コメントなど、LESS 固有の構文すべてに対応します。ネストしたセレクタ構造を保持し、ネストブロックを正しくインデントします。インデントセレクターを変更すると、2 スペース、4 スペース、タブを切り替えられます。
SCSS → CSS：公式の Dart Sass コンパイラー（v1.102）で SCSS/Sass スタイルシートをプレーンな CSS にコンパイルします。変数（$var）、ネスト、mixin（@mixin、@include）、関数、@extend、@if/@for/@each 制御フロー、現代の Sass モジュール（@use、@forward）に対応します。Sass コンパイラー（約 5.4 MB）はこのモードの初回使用時に遅延読み込みされます。
LESS → CSS：LESS スタイルシートをプレーンな CSS にコンパイルします。変数（@var）、ネスト、mixin、パラメータ付き mixin、演算、関数、ガード、インポート（@import）に対応します。コンパイラー（約 150 KB）は初回使用時に遅延読み込みされます。
SASS → CSS：インデント構文の SASS（.sass ファイル、波括弧なし、セミコロンなし）を Dart Sass でプレーンな CSS にコンパイルします。インデント SASS は波括弧の代わりに有意な空白を使うため、より簡潔です。同じ Dart Sass コンパイラー（約 5.4 MB）が SCSS とインデント SASS の両方を処理します。
CSS → SCSS：標準 CSS を自動ネストリファクタリング付きで SCSS 構文に変換します。BEM 風パターンを検出して .parent-child セレクターを &-child ネストブロックへ移動します。子孫セレクターをネストルールへ、擬似クラスセレクターを &:state へ変換し、繰り返される CSS カスタムプロパティを SCSS の $variables として抽出します。フラットで反復的な構造の CSS なら、このツールがきれいなネスト SCSS へのリファクタリングを助けます。
CSS → LESS：標準 CSS を自動ネストリファクタリング付きで LESS 構文に変換します。CSS→SCSS と同じ種類のネストです：繰り返される親パターン、子孫セレクター、擬似クラスを検出します。繰り返される CSS カスタムプロパティを LESS の @variables として抽出します。出力はきれいでネストされた LESS コードです。
カスケード、詳細度、そしてスタイルが衝突する理由

複数のルールが同じ要素を対象にするとき、詳細度が勝者を決めます：インラインスタイルは id に勝ち、id はクラスに勝ち、クラスは要素セレクターに勝ち、記述順が同点を破ります。!important フラグはこの計算を上書きします — そして次の上書きをその分だけ難しくします。

詳細度はセレクターごとに採点され、コンテキストから合計されるものではありません — より詳細なルールは、スタイルシートのどこに現れても勝ちます。