CSSをSCSSに変換
CSSをSCSS構造に変換
CSS入力
変換済みSCSS
CSSをSCSSの例
SCSSは変数、ネスト、ミックスインをCSSに追加します。プレーンCSSをSCSSに変換するとネストで再構成されSCSS機能の準備ができます。例：
変数とネストされたセレクター
CSS入力：
変換済みSCSS：
上のサンプルでさらにサンプルデータを読み込めます。
CSSをSCSSとは？
SCSSは変数、ネスト、ミックスインをCSSに追加します。プレーンCSSをSCSSに変換するとネストで再構成されSCSS機能の準備ができます。このツールはCSSをパースしてSCSS風の構造を出力します。W3C CSS仕様がソースを定義しています。Sassが出力を定義しています。
変換は完全にブラウザ内で行われます。サーバーには何も送信されません。出力は有効なSCSSです。逆の変換（SCSSをCSSに）にはSCSSをCSSにを。LessにはCSSをLessにを使用してください。
このツールの使い方
CSSを貼り付けまたはアップロード
CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なCSSはエラーを表示します。
SCSS出力を確認
右のパネルに変換されたSCSSが表示されます。構造が許せばセレクターがネストされます。変換後に変数やミックスインを手動で追加できます。
コピーまたはダウンロード
コピーまたはダウンロードを使用してください。確認にはSCSSをCSSにでSCSSをコンパイルしてください。まずCSSをフォーマットするにはCSSフォーマッターを使用してください。
CSSをSCSSが役立つ場面
プレーンCSSからSCSSへのプロジェクト移行時、またはデザインエクスポートのCSSをSCSSベースのコードベース（例：Bootstrap 4+、Foundation）に統合する場合、この変換が出発点になります。webpackやViteなどのビルドツールはSCSSをコンパイルします。出力は変数やミックスインで調整できるネスト構造を提供します。
FigmaなどのデザインツールはプレーンCSSをエクスポートすることが多いです。ここでSCSSに変換するとコンポーネントベースの構造に追加できます。代わりにLessにはCSSをLessにを。ベンダープレフィックスにはCSSプレフィクサーを使用してください。
よくある質問
変数やミックスインを追加しますか？
コンバーターは構造（ネスト）に焦点を当てています。繰り返し値を自動で変数に抽出しません。必要に応じて変数とミックスインを手動で追加してください。
データはプライベートですか？
はい。変換は完全にブラウザ内で行われます。データはサーバーに送信されません。
ネストはどのように機能しますか？
ツールはセレクター間の関係からネストを推測します。複雑なセレクターはフラットのままの場合があります。必要に応じて確認・調整してください。
CSSをSCSSとCSSをLessの違いは？
どちらもプリプロセッサ構文を出力します。SCSSはより広く使われています（Bootstrap 4+、多くのフレームワーク）。LessはBootstrap 3、Ant Designで使用されます。スタックに合わせて選択してください。
出力をコンパイルできますか？
はい。SCSSをSCSSをCSSにに貼り付けてコンパイル・確認してください。出力は元のCSS構造と一致するはずです。
関連ツール
Sass/SCSS：sass-lang.comとSassドキュメント。W3C CSSとMDN CSSがソース形式を定義。Bootstrap、Figma、webpack、Viteも参照。