CSS Araçları

Hepsi bir arada CSS araç kutusu: biçimlendirme/güzelleştirme, küçültme/sıkıştırma, sözdizimi doğrulama, SCSS/Sass & LESS dosyalarını CSS'e derleme ve CSS'i geri SCSS veya LESS'e tersine çevirme.
Tüm işlemler tarayıcınızda yerel olarak yapılır — verileriniz asla bir sunucuya yüklenmez.
Mod:
Girdi CSS / SCSS / LESS / SASS
Çıktı
Nasıl kullanılır: CSS/SCSS/LESS/SASS kodunu sol metin alanına yapıştırın, bir kip seçin ve İşleyin düğmesine tıklayın (ya da yalnızca yazın — girişte otomatik işlenir).
Her kip nasıl çalışır
CSS Biçimlendirme: CSS'i tutarlı girintiyle (2/4 boşluk veya sekme), satır başına bir özellik olacak şekilde biçimlendirir. @media, @keyframes, @supports gibi iç içe at-kuralları işler. Yorumları korur (hem /* */ hem tek satırlık). 2 boşluk, 4 boşluk veya sekme arasında geçiş yapmak için Girinti seçicisini değiştirin.
Küçültme: En kompakt CSS'i üretmek için gereksiz tüm boşlukları, yorumları ve fazla karakterleri kaldırır. Dosya boyutunu ve bant genişliğini azaltmak için üretim dağıtımı için idealdir. Sıkıştırma oranını görmek için istatistik çubuğunu kontrol edin.
Doğrula: CSS'i ayrıştırır ve sözdizimi hatalarını denetler. Ayrıştırma hatalarını tam satır ve sütun numaralarıyla bildirir. Ayrıca istatistikleri gösterir: kural, seçici, bildirim ve at-kuralı sayısı.
SCSS Biçimlendirme: SCSS/Sass stil sayfalarını tutarlı girintiyle yeniden biçimlendirir. Tüm SCSS'e özgü sözdizimini işler: $variables, @mixin/@include, @extend, @if/@for/@each denetim akışı, #{$var} enterpolasyonu ve // tek satırlık yorumlar. İç içe seçici yapısını korur ve iç içe blokları doğru girintiler. 2 boşluk, 4 boşluk veya sekme arasında geçiş yapmak için Girinti seçicisini değiştirin.
LESS Biçimlendirme: LESS stil sayfalarını tutarlı girintiyle yeniden biçimlendirir. Tüm LESS'e özgü sözdizimini işler: @variables, parametrik karışımlar, korumalar (when), @{var} enterpolasyonu, birleştirme ve // tek satırlık yorumlar. İç içe seçici yapısını korur ve iç içe blokları doğru girintiler. 2 boşluk, 4 boşluk veya sekme arasında geçiş yapmak için Girinti seçicisini değiştirin.
SCSS → CSS: SCSS/Sass stil sayfalarını resmî Dart Sass derleyicisiyle (v1.102) düz CSS'e derler. Değişkenleri ($var), iç içe geçmeyi, karışımları (@mixin, @include), işlevleri, @extend, @if/@for/@each denetim akışını ve modern Sass modüllerini (@use, @forward) destekler. Sass derleyicisi (~5.4 MB) bu kipi ilk kez kullandığınızda tembel yüklenir.
LESS → CSS: LESS stil sayfalarını düz CSS'e derler. Değişkenleri (@var), iç içe geçmeyi, karışımları (mixin), parametrik karışımları, işlemleri, işlevleri, korumaları ve içe aktarmayı (@import) destekler. Derleyici (~150 KB) bu kipi ilk kez kullandığınızda tembel yüklenir.
SASS → CSS: girintili SASS sözdizimini (.sass dosyaları, süslü parantez ve noktalı virgül yok) Dart Sass kullanarak düz CSS'e derler. Girintili SASS, süslü parantezler yerine anlamlı boşlukları kullanır ve bu da onu daha özlü kılar. Aynı Dart Sass derleyicisi (~5.4 MB) hem SCSS hem de girintili SASS sözdizimini işler.
CSS → SCSS: Standart CSS'i otomatik iç içe geçme yeniden düzenlemesiyle SCSS sözdizimine dönüştürür. BEM benzeri örüntüleri tespit eder ve .parent-child seçicilerini &-child iç içe bloklara taşır. Alt seçicileri iç içe kurallara, sözde sınıf seçicilerini &:state'e dönüştürür ve tekrarlayan CSS özel özelliklerini SCSS $değişkenlerine çıkarır. CSS'iniz düz ve tekrarlayan bir yapıdaysa, bu araç onu daha temiz iç içe SCSS'e yeniden düzenlemenize yardımcı olur.
CSS → LESS: Standart CSS'i otomatik iç içe geçme yeniden düzenlemesiyle LESS sözdizimine dönüştürür. CSS→SCSS ile aynı türde iç içe geçme: tekrarlayan üst öğe örüntülerini, alt seçicileri ve sözde sınıfları tespit eder. Tekrarlayan CSS özel özelliklerini LESS @değişkenlerine çıkarır. Çıktı temiz, iç içe geçmiş LESS kodudur.
Kaskad, özgüllük ve stillerin neden çatıştığı

Birden çok kural aynı öğeyi hedeflediğinde, kazananı özgüllük belirler: satır içi stiller id'leri, id'ler sınıfları, sınıflar öğe seçicilerini geçer ve kaynak sırası eşitliği bozar. !important bayrağı bu aritmetiği geçersiz kılar — ve bir sonraki geçersiz kılmayı o kadar zorlaştırır.

Özgüllük, bağlamdan toplanmak yerine seçici başına puanlanır — daha özgül bir kural, stil sayfasında nerede görünürse görünsün kazanır.