CSS'ten SCSS'e (İç İçe Kurallara) Çevirme

Nasıl çalışır?

CSS kodunuzu sol panele yapıştırın; iç içe yazılmış karşılığı sağ panelde hemen oluşur. Araç her seçiciyi boşluklarından ve > + ~ işaretlerinden parçalara ayırır; aynı başlangıcı taşıyan ardışık kuralları tek bloğun içine yerleştirir. Örnekteki altı kural iki üst bloğa iner: .menu ul, .menu li ve .menu a kuralları .menu bloğunun içine girer, .menu a:hover ise a bloğunun içinde &:hover olur. @media içindeki kurallar kendi içinde aynı biçimde iç içe yazılır ama @media bloğu bir kuralın içine taşınmaz; bu yüzden derlenen CSS eskisiyle aynı sırada çıkar. Hedef biçim olarak SCSS (süslü parantez ve noktalı virgülle), LESS, girintili Sass ya da Stylus seçebilirsiniz; girintili biçimlerde parantez ve noktalı virgül kullanılmaz. Virgülle ayrılmış seçiciler (.a, .b) bölünmez, olduğu gibi kalır. Yorum satırları atılır ve sonuç satırında kaç tane olduğu yazılır.

Bu araç css to scss, css to sass, css to less, css to scss converter aramalarıyla da biliniyor.

SCSS nedir?

SCSS (Sassy CSS), Sass ön işlemcisinin CSS'e en çok benzeyen yazım biçimidir. Süslü parantez ve noktalı virgül kullanır; buna ek olarak iç içe kurallar, $ ile başlayan değişkenler, @mixin ile yeniden kullanılabilir bloklar ve hesaplama sunar. Tarayıcı SCSS okuyamaz; dosya önce Sass derleyicisiyle düz CSS'e çevrilir. Geçerli her CSS dosyası aynı zamanda geçerli bir SCSS dosyasıdır, bu yüzden mevcut bir projeye kademeli geçmek kolaydır.

İç içe kural (nesting) nedir?

İç içe kural, bir seçicinin alt seçicilerini onun bloğunun içine yazmaktır: .menu { a { } } derlendiğinde .menu a olur. & işareti üst seçiciyi temsil eder; a { &:hover { } } derlenince a:hover çıkar. Bu yazım, aynı öneki her satırda tekrar etmeyi önler ve sayfadaki bileşenin yapısını kodda görünür kılar. Aşırı derin iç içe yazım ise çok uzun ve özgüllüğü yüksek seçiciler üretir; üç dört seviyeyi geçmemek önerilir.

SCSS ile Sass arasındaki fark nedir?

İkisi de aynı Sass derleyicisinin iki yazım biçimidir ve aynı özellikleri sunar. SCSS (.scss) süslü parantez ve noktalı virgül kullanır; CSS bilen biri hemen okuyabilir ve her CSS dosyası geçerli SCSS'tir. Girintili Sass (.sass) parantez ve noktalı virgül kullanmaz, blokları yalnız girintiyle ayırır; daha kısadır ama bir boşluk hatası kodun anlamını değiştirir. Yeni projelerde çoğunlukla SCSS tercih edilir.

Kural sırası neden korunur

CSS'te iki kural aynı öğeye aynı özgüllükle uyuyorsa sonda yazılan kazanır. İç içe yazıma çeviren bazı araçlar aynı seçiciyle başlayan bütün kuralları dosyanın neresinde olursa olsun tek bloğa toplar; derlenen CSS'te kurallar yer değiştirir ve bir düğmenin rengi sessizce değişebilir. Bu araç yalnız ardışık kuralları birleştirir: .menu kuralından sonra başka bir blok gelip ardından yeniden .menu yazılmışsa ikinci .menu ayrı blok olarak kalır.

Aynı nedenle @media kuralları bir seçicinin içine taşınmaz. SCSS buna izin verir ama çıktıdaki sıra değişir. Değişken ve karışım (mixin) çıkarımı da yapılmaz: #1c1917 gibi tekrar eden renkleri $koyu gibi bir değişkene çevirmek, kodun anlamını bilen bir insanın kararıdır.

• .menu a { } → .menu { a { } }
• .menu a:hover { } → a { &:hover { } }
• .liste > li { } → .liste { > li { } } (Stylus'ta & > li)

Hangi hedef biçimi seçmeli

Projeniz Sass kullanıyorsa ve dosya uzantınız .scss ise SCSS seçin; bugün en yaygın biçim budur ve geçerli her CSS aynı zamanda geçerli SCSS'tir. Dosyalarınız .sass uzantılıysa girintili Sass seçin; bu biçimde süslü parantez ve noktalı virgül yoktur, iç içe yapı yalnız girintiyle gösterilir, bu yüzden girintiyi bozmadan kopyalayın.

Bootstrap 3 gibi eski bir tema ya da LESS kullanan bir proje üzerinde çalışıyorsanız LESS seçin; iç içe yazım SCSS ile aynıdır. Stylus, Node.js projelerinde kullanılan girintili bir biçimdir; burada iç içe birleştiriciler & > li biçiminde yazılır.

Sık sorulanlar

CSS SCSS'e nasıl çevrilir?

CSS kodunu sol panele yapıştırın. Araç .menu a gibi seçicileri parçalarına ayırıp .menu bloğunun içine a bloğu olarak yerleştirir, :hover gibi durumları &:hover yapar. Geçerli her CSS zaten geçerli SCSS olduğundan dosyayı .scss diye kaydetmek de çalışır; aracın kattığı şey iç içe, okunaklı düzendir.

Çıktıyı derleyince CSS'im değişir mi?

Hayır, aynı kurallar aynı sırayla çıkar. Araç yalnız ardışık kuralları birleştirir, @media bloklarını yerinde bırakır ve virgülle ayrılmış seçicileri bölmez; bu üçü sıranın ve anlamın korunmasını sağlar. Yalnız yorum satırları atılır.

Renkleri değişkene çeviriyor mu?

Hayır. Hangi rengin marka rengi olduğunu, hangisinin tesadüfen aynı çıktığını kod tek başına söylemez; bu kararı size bırakır. Çıktıda tekrar eden değerleri görüp elle $ ile başlayan değişkenlere taşıyabilirsiniz.

Kodum bir yere gönderiliyor mu?

Hayır. Dönüşüm tamamen tarayıcınızda yapılır; yapıştırdığınız stil dosyası hiçbir sunucuya gitmez.