Konverter Properti Kustom CSS ke Variabel SCSS
Konversi properti kustom CSS (--name, var()) ke variabel Sass/SCSS ($name) dan sebaliknya. Membuka wrapper :root ke cakupan global Sass, menyelesaikan fallback var(), dan menjaga komentar serta struktur.
Input
Output
Cara lain menggunakan alat ini
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-…"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-custom-properties-to-scss-converter` tool (CSS Custom Properties to SCSS Variables Converter) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-custom-properties-to-scss-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Konverter Properti Kustom CSS ke Variabel 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>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Yang dilakukan alat ini
Tempel CSS yang menggunakan properti kustom (--primary-color: #464aff;, direferensikan melalui var(--primary-color)) dan dapatkan kembali Sass yang setara, dengan deklarasi $primary-color: #464aff; dan referensi $primary-color — atau jalankan dengan cara lain, dari SCSS berbasis $variable kembali ke properti kustom CSS biasa. Pilih arah, tempel, dan kode yang dikonversi muncul secara instan. Semuanya berjalan di browser Anda; tidak ada yang Anda tempel yang diunggah ke mana pun.
CSS → SCSS
- Wrapper
:root { ... }dibuka: deklarasinya mengambang ke cakupan global Sass, karena variabel Sass tidak dapat hidup di dalam pemilih dengan cara properti kustom CSS dapat. var(--name)menjadi$nameketika--namedideklarasikan dalam blok:rootitu.var(--name, fallback)menyelesaikan fallback untuk Anda ketika--nametidak memiliki deklarasi untuk menunjuk — termasuk fallback yang sendirinya adalahvar()bersarang.- Komentar, pemilih, dan pemformatan di luar bagian yang dikonversi dibiarkan persis seperti yang Anda tulis.
SCSS → CSS
$name: value;yang dideklarasikan di tingkat atas berpindah ke blok:root { ... }yang dihasilkan, karena properti kustom biasa tidak dapat ada di luar pemilih dalam CSS.$name: value;yang dideklarasikan di dalam pemilih mengubah di tempat menjadi--name: value;, mempertahankan cakupannya.- Setiap referensi
$namemenjadivar(--name).!defaultyang tertinggal dijatuhkan — perilakunya "tetapkan hanya jika belum disetel" tidak memiliki setara CSS statis.
Yang tidak akan dilakukannya
Ini adalah pengonversi sintaks variabel, bukan kompiler Sass. Mixin, @if/@each, @function, interpolasi string (#{...}) dan matematika Sass tidak dievaluasi — nilai seperti $base * 2 menjadi var(--base) * 2 sebagai teks biasa, yang akan Anda bungkus dalam calc() dengan tangan untuk mendapatkan CSS yang valid. --name yang dideklarasikan di dalam pemilih bersyarat (penggantian [data-theme="dark"], penyesuaian titik henti @media) dibiarkan apa adanya daripada dikonversi, karena variabel Sass waktu kompilasi tidak dapat mewakili nilai yang berubah per media query atau cascade.
FAQ
Akankah ini mengompilasi seluruh file Sass saya ke CSS?
Tidak — hanya deklarasi variabel dan referensi yang diterjemahkan. Nesting, &, mixin, dan semuanya lainnya melewati tanpa sentuhan. Jalankan hasil melalui kompiler Sass nyata (atau Pemformat SCSS / Sass untuk merapikan keluaran) untuk apa pun di luar variabel.
Apa yang terjadi pada nilai fallback var() di perjalanan ke SCSS?
Jika properti kustom yang direferensikan dideklarasikan di tempat lain dalam masukan Anda, fallback dijatuhkan — variabel Sass sudah memiliki nilai nyata. Jika tidak dideklarasikan di mana pun, fallback itu sendiri digunakan di tempat, sehingga kode yang dikonversi tidak mereferensikan variabel yang tidak ditentukan.
Apakah menangani variabel CSS yang bersifat di luar :root, seperti penggantian mode gelap?
Tidak, dengan desain — --name yang dideklarasikan ulang di bawah media query atau pemilih [data-theme] adalah penggantian waktu proses yang tidak memiliki setara dalam variabel waktu kompilasi Sass, jadi deklarasi tersebut dibiarkan sebagai CSS biasa daripada diam-diam menghasilkan snapshot yang salah.
Privasi
Semuanya berjalan secara lokal di browser Anda. Kode Anda tidak pernah diunggah atau disimpan di mana pun.