Alat CSS

Kotak alat CSS serba-ada: format/rapikan, minify/padatkan, validasi sintaks, kompilasi SCSS/Sass & LESS ke CSS, dan konversi balik CSS kembali ke SCSS atau LESS.
Semua pemrosesan berlangsung secara lokal di browser — data Anda tidak pernah diunggah ke server mana pun.
Mode:
CSS / SCSS / LESS / SASS input
Output
Cara penggunaan: Tempel CSS/SCSS/LESS/SASS Anda di kotak teks kiri, pilih mode, dan klik Proses (atau cukup ketik — diproses otomatis saat input).
Cara kerja setiap mode
Format CSS: Memformat CSS dengan indentasi yang konsisten (2/4 spasi atau tab), satu properti per baris. Menangani at-rule bersarang seperti @media, @keyframes, @supports. Mempertahankan komentar (baik /* */ maupun satu baris). Ubah pemilih Indentasi untuk beralih antara 2 spasi, 4 spasi, atau tab.
Minify: Menghapus semua spasi, komentar, dan karakter berlebih yang tidak perlu untuk menghasilkan CSS yang paling padat. Ideal untuk penerapan produksi guna mengurangi ukuran file dan bandwidth. Periksa bilah statistik untuk melihat rasio kompresinya.
Validasi: Mengurai CSS dan memeriksa kesalahan sintaks. Melaporkan kesalahan parse dengan nomor baris dan kolom yang tepat. Juga menampilkan statistik: jumlah aturan, selektor, deklarasi, dan at-rule.
Format SCSS: Memformat ulang stylesheet SCSS/Sass dengan indentasi yang konsisten. Menangani semua sintaks khusus SCSS: $variabel, @mixin/@include, @extend, alur kontrol @if/@for/@each, interpolasi #{$var}, dan komentar satu baris //. Mempertahankan struktur selektor bersarang dan menginden blok bersarang dengan benar. Ubah pemilih Indentasi untuk beralih antara 2 spasi, 4 spasi, atau tab.
Format LESS: Memformat ulang stylesheet LESS dengan indentasi yang konsisten. Menangani semua sintaks khusus LESS: @variabel, mixin parametrik, guard (when), interpolasi @{var}, penggabungan, dan komentar satu baris //. Mempertahankan struktur selektor bersarang dan menginden blok bersarang dengan benar. Ubah pemilih Indentasi untuk beralih antara 2 spasi, 4 spasi, atau tab.
SCSS → CSS: Mengompilasi stylesheet SCSS/Sass menjadi CSS biasa menggunakan kompiler resmi Dart Sass (v1.102). Mendukung variabel ($var), nesting, mixin (@mixin, @include), fungsi, @extend, alur kontrol @if/@for/@each, dan modul Sass modern (@use, @forward). Kompiler Sass (~5,4 MB) dimuat secara lazy pada pertama kali Anda memakai mode ini.
LESS → CSS: Mengompilasi stylesheet LESS menjadi CSS biasa. Mendukung variabel (@var), nesting, mixin, mixin parametrik, operasi, fungsi, guard, dan impor (@import). Kompiler (~150 KB) dimuat secara lazy pada pertama kali Anda memakai mode ini.
SASS → CSS: Mengompilasi sintaks SASS berindentasi (file .sass, tanpa kurung kurawal, tanpa titik koma) menjadi CSS biasa menggunakan Dart Sass. SASS berindentasi memakai spasi yang bermakna alih-alih kurung kurawal, sehingga lebih ringkas. Kompiler Dart Sass yang sama (~5,4 MB) menangani sintaks SCSS dan SASS berindentasi.
CSS → SCSS: Mengonversi CSS standar ke sintaks SCSS dengan refaktorisasi nesting otomatis. Mendeteksi pola mirip BEM dan memindahkan selektor .induk-anak ke blok bersarang &-anak. Mengonversi selektor turunan menjadi aturan bersarang, selektor pseudo-kelas menjadi &:state, dan mengekstrak properti kustom CSS yang berulang menjadi $variabel SCSS. Jika CSS Anda memiliki struktur datar dan repetitif, alat ini membantu merefaktornya menjadi SCSS bersarang yang lebih bersih.
CSS → LESS: Mengonversi CSS standar ke sintaks LESS dengan refaktorisasi nesting otomatis. Jenis nesting yang sama dengan CSS→SCSS: mendeteksi pola induk yang berulang, selektor turunan, dan pseudo-kelas. Mengekstrak properti kustom CSS yang berulang menjadi @variabel LESS. Keluarannya adalah kode LESS bersarang yang bersih.
Cascade, spesifisitas, dan mengapa gaya saling bertentangan

Ketika beberapa aturan menargetkan elemen yang sama, spesifisitas menentukan pemenangnya: gaya inline mengalahkan id, id mengalahkan kelas, kelas mengalahkan selektor elemen, dan urutan sumber memutuskan seri. Bendera !important mengesampingkan perhitungan ini — dan membuat penggantian berikutnya jauh lebih sulit.

Spesifisitas dihitung per selektor, tidak dijumlahkan dari konteks — aturan yang lebih spesifik menang di mana pun ia muncul dalam stylesheet.