SCSSをCSSに変換するコンバーター。
オンラインでSCSSをCSSにコンパイルするコンバーター。インストール不要。
SCSS to CSS について
インデントベースのルールブロックを解析し、SCSS のネストをプレーンな CSS にフラット化します。ネストされたセレクタを親セレクタと結合し（& 親参照ショートハンドを尊重）、各ルールをプロパティとともに出力します。さらに、行コメントや $variable 宣言といった SCSS 固有の機能を取り除きます。
使い方
1. 入力ボックスに SCSS を貼り付けます。 2. Convert をクリックすると、出力ボックスに CSS が表示されます。 3. Copy を使って結果をコピーします。入力が空の場合はエラーメッセージが表示されます。
ネストと変数
ネストされたセレクタは、親セレクタの後にスペースで結合されます（例：.parent .child）。& で始まる子セレクタ（&:hover のような擬似クラスを含む）は、スペースを挟まずに親へ直接結合されます。SCSS の $variable 宣言は /* $variable removed */ コメントに置き換えられ、残存する $name の使用は var(--variable) になります。そのため、完全な変数解決を行わなくても出力は有効な CSS となります。
▶パーサーはネストの深さをどのように検出しますか？
各行の先頭のホワイトスペースを計測し、開いているルールのスタックを管理します。前のルールよりインデントが深い行はそのルールの子になり、同じかより浅いインデントの行はスタックを対応する親まで戻します。
▶SCSS 変数はどのように処理されますか？
$var: value; 宣言は削除されてコメントに置き換えられ、残存する $var 参照は var(--variable) に書き換えられます。本ツールは元の値を置換しないため、完全な変数解決が必要な場合は Dart Sass コンパイラを使用してください。
▶@include、@mixin、@extend には対応していますか？
いいえ。コンバータはネストされたセレクタと基本プロパティのみを処理します。Mixin、extend、関数、@use/@import は展開されず、実際の Sass コンパイラで処理する必要があります。
▶インラインコメントは保持されますか？
いいえ。// で始まる行は、プレーンな CSS では無効なため解析時に削除されます。出力に残るのは標準の /* ... */ ブロックコメントだけです。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。