SCSS および Sass コンパイラ

Compile pasted SCSS/Sass snippets or local .scss/.sass files directly in your browser.スタイルシートはアップロード、記録、または API に送信されません。

クリックして SCSS/Sass ファイルを選択するか、ここにドロップします

SCSS/Sass を下のエディタに直接貼り付けることもできます。

0バイト

0バイト

準備完了

ブラウザネイティブのコンパイル

コンパイルは、公式の Dart Sass 実装を使用してローカルで実行されます。スタイルシートは Convertr サーバーに送信されません。

スニペットとファイルの入力

部分的な SCSS、完全なスタイルシート、ネストされたルール、変数、ミックスインを貼り付けるか、ローカルの .scss ファイルをロードします。

安全な測定

分析では、サイズバケットと削減バケットのみが使用されます。 SCSS ソース、変数、ミックスイン、およびファイル名はテレメトリから除外されます。

よくある質問

私の SCSS は Convertr にアップロードされていますか?

いいえ。SCSS コンパイラはブラウザの JavaScript を使用してローカルで実行されます。貼り付けられた SCSS と選択されたファイルは Convertr サーバーに送信されません。

SCSS に構文エラーがあるとどうなりますか?

コンパイラ エラーが行番号と列番号とともに警告パネルに表示されるので、エラーを見つけて修正できます。

これは @import またはリモート依存関係をサポートしますか?

いいえ。速度、オフライン可用性、プライバシーを確​​保するため、このブラウザネイティブ コンパイラではリモート インポートとファイル システム アクセスが無効になっています。

SCSSコンパイラ

サポートされた SCSS シンタックスを CSS に組み立て、バンドルされたブラウザのコピーを使用します。

入力
SCSS ソース より output-style オプション.
出力
CSSまたはコピーラー診断.
リアル制限
ブラウザコピーラーは、任意のプロジェクト輸入を解決し、構築プラグインを実行したり、別のSassバージョンと平等性を保証したりしない。
プライバシーとデータ処理
SCSS ソースプラス 出力スタイルのオプションは、このブラウザのタブで処理されます. Convertr はそれを受け取ったり保存したりしません; ページを閉じたり再ロードしたりすると、ツールが現地ダウンロードを明示的に提供しない限り、作業状態が明らかになります。

このツールをどのように使うか

  1. ツールコントロールで SCSS ソースと出力スタイルのオプションを提供します。
  2. 複製された CSS または複製器の診断に影響を与える設定を選択し、ツールを実行します。
  3. コピーまたはダウンロードする前に、CSSまたはコピーの診断を編集する。

一般的な失敗モード

未定の変数、欠けているミキシン、不適切な輸入、または無効なニッティングは、ライン意識の複製エラーを返します。

役に立つ例

ブランド変数とノースの .button hover ルールを拡張または圧縮された CSS に組み合わせる。