SCSS Biçimlendirici
SCSS kodunu doğrudan tarayıcınızda temiz ve okunabilir bir yapıda biçimlendirin.
Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız hiçbir zaman bir sunucuya yüklenmez.
$color:#3366ff;
.button {
color:$color;
&:hover {
opacity:.8;
}
}Bu biçimlendirici ne yapar?
SCSS benzeri metni açılan ve kapanan süslü parantezler ile noktalı virgüllerden sonra satırlara ayırır; her iç içe parantez düzeyinde iki boşluklu girinti uygular — SCSS iç içe geçmesi, &:hover tarzı üst seçiciler ve @mixin/@include blokları dahil, bunların hepsi bu biçimlendirici için yalnızca süslü parantezle sınırlanmış bloklardır.
Nasıl kullanılır?
SCSS kodunu editöre yapıştırın; biçimlendirilmiş sonuç anında güncellenir. Hazır olduğunda çıktıyı kopyalayın veya Reset ile editörü temizleyin; Reset ilk örneği geri getirmez.
Biçimlendirme davranışı
Tırnaklı dizeler ve yorumlar dışında art arda gelen boşluklar azaltılır, bildirimler noktalı virgüllerden sonra bölünür — bu, düz bir CSS kuralı, iç içe bir seçici veya bir mixin gövdesi için aynı şekilde işler. Tırnaklı içerik, kaçış karakterleri, blok yorumları ve tanınan // satır yorumları korunur; #{$degisken} gibi interpolasyon, bir bildirim içindeki sıradan karakterler olduğundan değiştirilmeden geçer.
Önemli ayrıştırma sınırı
Bu araç hafif, karakter tabanlı bir düzenleyicidir; SCSS derleyicisi, ayrıştırıcı veya linter değildir — Sass'ı CSS'e derlemez, değişkenleri veya @mixin/@include/@extend direktiflerini çözümlemez, iç içe geçme derinliğini doğrulamaz veya Sass'a özgü sözdizimi hatalarını kontrol etmez. Ayrıca iki nokta çevresini normalleştirmez, özellik sıralamaz veya kısaltmaları açmaz.
Güvenli inceleme akışı
Biçimlendirici yalnızca süslü parantezlere, tırnaklara ve noktalı virgüllere tepki verdiğinden, alışılmadık yapılar — derin iç içe geçmiş & seçicileri, @if/@each gibi kontrol direktifleri veya tırnaksız interpolasyon — şaşırtıcı girintiler oluşturabilir. Üretimde güvenmeden önce çıktıyı inceleyin ve normal Sass araç zincirinizle derleyin.
Gizlilik
İşlem tarayıcınızda yerel gerçekleşir. Yapıştırılan SCSS bu araç tarafından yüklenmez.
Sıkça Sorulan Sorular
- SCSS Biçimlendirici ne yapar?
- SCSS kodunu doğrudan tarayıcınızda temiz ve okunabilir bir yapıda biçimlendirin.
- Bu SCSS aracı program davranışını değiştirir mi?
- Yalnızca düzeni veya kaldırılabilir boşlukları değiştirir. Alışılmadık sözdizimi kullanan kodlarda çıktıyı üretimde kullanmadan önce inceleyin.
- Kodum yüklenir mi?
- İşlem yerel olarak yapılır ve kodunuz yüklenmez.