SCSSをCSSに変換
SCSS/SASSコードをCSSに変換
SCSS入力
コンパイル済みCSS
SCSSをCSSの例
SCSSの変数とネストがプレーンCSSにコンパイルされます。例：
変数とネストされたセレクター
SCSS入力：
コンパイル済みCSS：
上のサンプルでさらにサンプルデータを読み込めます。
SCSSをCSSとは？
SCSS（Sassy CSS）は変数、ネスト、ミックスインなどを追加するCSSプリプロセッサです。ブラウザはSCSSを実行しません—プレーンCSSが必要です。このツールはSCSS（またはSASS）をブラウザ対応のCSSにコンパイルします。Sassドキュメントが構文を定義しています。
コンパイルは完全にブラウザ内で行われます。サーバーには何も送信されません。出力は標準CSSです。逆の変換（CSSをSCSSに）にはCSSをSCSSにを。LessにはLessをCSSにを使用してください。
このツールの使い方
SCSSを貼り付けまたはアップロード
SCSSまたはSASSをコピーして左のエディターに貼り付けます。アップロードをクリックして.scssまたは.sassファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なSCSSはエラーを表示します。
コンパイルされたCSSを確認
右のパネルにコンパイルされたCSSが表示されます。変数は解決され、ネストはフラット化され、ミックスインは展開されます。出力はどのブラウザでも使用できるプレーンCSSです。
コピーまたはダウンロード
コピーまたはダウンロードを使用してください。出力のフォーマットにはCSSフォーマッターを。ミニファイにはCSSミニファイアーを使用してください。
SCSSをCSSが役立つ場面
プロジェクト、デザインシステム、レガシーコードベースからSCSSがあり、プレーンCSSが必要な場合—クイックテスト、メールテンプレート、ビルドツールをサポートしないシステム—このコンパイルが役立ちます。BootstrapやFoundationなどのフレームワークはSCSSを使用します。本番ビルドにはDart SassとwebpackがSCSSをコンパイルします。デバッグにも便利：SCSSが生成するCSSを正確に確認できます。
多くのフレームワーク（Bootstrap、Foundation）はSCSSを使用します。変数をカスタマイズしたりスタイルを抽出する場合、ここでコンパイルすると最終CSSが得られます。既存のCSSをSCSS構造に変換するにはCSSをSCSSにを使用してください。
よくある質問
SCSSとSASSの違いは？
SCSSはCSSのように中括弧を使用します。SASSはインデント（括弧なし）を使用します。どちらも同じCSSにコンパイルされます。このツールは両方の構文に対応しています。
@importに対応していますか？
ファイルがアップロードされていない場合、パーシャルインポートは解決されないことがあります。マルチファイルプロジェクトにはDart Sassやバンドラーなどのビルドツールを使用してください。Sass CLIを参照。
データはプライベートですか？
はい。コンパイルは完全にブラウザ内で行われます。データはサーバーに送信されません。
ミックスインと関数は？
ミックスインと関数はコンパイル中に展開されます。出力CSSには解決された値が含まれます。複雑な関数はコンパイラの能力内でサポートされています。
Bootstrapで使えますか？
BootstrapのSCSSには多くのパーシャルと変数があります。完全なBootstrapコンパイルには公式ビルドまたはnpmを使用してください。このツールは単一ファイルのSCSSまたはスニペットで動作します。
関連ツール
Sass/SCSS：sass-lang.comとSassドキュメント。MDN CSSとW3C CSSが出力形式を定義しています。