CSSカスタムプロパティをSCSS変数に変換

CSSカスタムプロパティ(--name、var())をSass/SCSS変数($name)に変換またはその逆。:rootをSassグローバルスコープに展開し、var()フォールバックを解決し、コメントと構造を保持します。

入力

方向

入力

出力

役に立ちましたか？

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-custom-properties-to-scss-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "direction": "css-to-scss",
    "inputCode": ":root {\n  --primary-color: #464aff;\n  --spacing-…"
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `css-custom-properties-to-scss-converter` tool (CSS Custom Properties to SCSS Variables Converter) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/css-custom-properties-to-scss-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSSカスタムプロパティをSCSS変数に変換 — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用	5クレジットから
クレジットが足りませんか?	料金を見る

次の方法でも利用可能

統合ブラウザ拡張機能 VS Code拡張機能

ガイド

このツールについて

カスタムプロパティ(--primary-color: #464aff;、var(--primary-color)を通じて参照される)を使用するCSSを貼り付けると、$primary-color: #464aff;宣言と$primary-color参照を備えた同等のSassが返されます。または、$variableベースのSCSSから普通のCSSカスタムプロパティに戻す方向で実行できます。方向を選択して貼り付けると、変換されたコードが即座に表示されます。すべてはブラウザで実行され、貼り付けたコードはどこにもアップロードされません。

CSS → SCSS

:root { ... }ラッパーはアンラップされます。その宣言はSassのグローバルスコープに浮かぶのは、Sass変数がCSSカスタムプロパティのようにセレクタ内に存在することはできないからです。
var(--name)は、--nameがその:rootブロック内で宣言されているときに$nameになります。
var(--name, fallback)は、--nameに指すべき宣言がない場合にフォールバックを解決します。これには、それ自体がネストされたvar()であるフォールバックが含まれます。
コメント、セレクタ、および変換される部分外のフォーマットは、記述したままの状態になります。

SCSS → CSS

トップレベルで宣言されている$name: value;は、生成された:root { ... }ブロックに移動します。これは、普通のカスタムプロパティがCSSのセレクタの外に存在することはできないからです。
セレクタ内で宣言されている$name: value;は、--name: value;に変換され、スコープが保持されます。
すべての$name参照はvar(--name)になります。末尾の!defaultは削除されます。その「未設定の場合のみ割り当てる」動作には、静的なCSS同等物はありません。

できないこと

これは変数構文コンバータであり、Sassコンパイラではありません。ミックスイン、@if/@each、@function、文字列補間(#{...})、およびSass数学は評価されません。$base * 2のような値は、有効なCSSを取得するために手動でcalc()でラップする必要がある、プレーンテキストとしてvar(--base) * 2になります。条件セレクタ([data-theme="dark"]オーバーライド、@mediaブレークポイント調整)内で宣言された--nameは変換されず、そのままになります。これは、コンパイル時Sass変数がメディアクエリまたはカスケードごとに変わる値を表すことができないためです。

FAQ

これは私の Sass ファイル全体を CSS にコンパイルしますか? いいえ。変数の宣言と参照のみが変換されます。ネスト、&、ミックスイン、その他すべてはそのまま通ります。実際のSassコンパイラ(SCSS/Sassフォーマッタで出力を整理するため)で結果を実行してください。

SCSS へ進む過程で var() フォールバック値はどうなりますか? 参照されているカスタムプロパティが入力の別の場所で宣言されている場合、フォールバックは削除されます。Sass変数には既に実際の値があります。どこにも宣言されていない場合は、フォールバック自体がその場所で使用されるため、変換されたコードは未定義の変数を参照しません。

CSS 変数が :root の外でスコープされている場合(ダークモードオーバーライドなど)に対応していますか? いいえ、設計上。メディアクエリまたは[data-theme]セレクタの下で再宣言された--nameは、Sassのコンパイル時変数に相当するものがない実行時オーバーライドであるため、これらの宣言は静かに間違ったスナップショットを生成する代わりに、プレーンなCSSのままになります。

プライバシー

すべてはブラウザでローカルに実行されます。コードはどこにもアップロードまたは保存されません。

sasscss variablesdesign tokensvar()preprocessorthemingstylesheet variablesroot variables

ツールが気に入りましたか？広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。

広告を削除