CSS’yi Sass ve SCSS’ye dönüştürme
CSS gerçekten basit ve anlaşılır bir dildir, ancak çok uzadıkça, diyelim ki binlerce satır, bir bakım ‘kabusuna’ dönüşür. Her şey sürdürülemeyecek kadar karmaşık olacak ve hangi stil kurallarına uyacağımız veya üzerine yazacağımız konusunda kaybolacağız. Bu nedenle, CSS yazmayı programlanabilir ve daha sürdürülebilir hale getirmek için bir CSS Ön İşlemcisi oluşturulur.
Geliştiriciler ve tasarımcılar arasında popüler olanlardan biri, Sass’tır. CSS’den Sass’a yeni geçiş yaptıysanız, eski CSS’nizi Sass veya SCSS’ye dönüştürmeyi düşünüyor olabilirsiniz. Peki, durum buysa, css2sass adlı üçüncü taraf bir araç kullanabilirsiniz.
CSS2SASS Kullanımı
Bu araç basit ve sezgiseldir, size nasıl kullanılacağını söylememe bile gerek kalmayabilir, ancak öğretmek amacıyla araçla birkaç test yapacağız. İlk olarak, aşağıdaki CSS kodları verildiğinde:
Bunu Sass sözdizimine dönüştürmek istiyoruz, bu da şuna dönüştürülür:
Stil kuralları artık basamaklı düzeyi ayırt etmek için girinti kullanılarak önceki seçicilerin altına yerleştirilmiştir. Bunu SCSS sözdizimine dönüştürürsek, basamaklama tıpkı CSS’de olduğu gibi kıvrımlı parantezlerle farklılaşacaktır.
Aynı Stil Kuralları
Tekrar deneyelim. Bu sefer, aynı stil kurallarına sahip aşağıdaki iki seçicimiz var ve onu Sass sözdizimine çevireceğiz.
Oluşturulan çıktı oldukça akıllıdır, bu araç seçicileri tek bir satırda birleştirir ve aşağıdaki gibi virgül kullanarak ayırır.
Yine de, aslında beklediğim bu değildi. Çıktının Selector Inheritance’da olması daha iyi olurdu, muhtemelen aşağıdaki kodda olduğu gibi.
Sözde sınıf ve Seçici Kombinasyonu
Son olarak, bazı stil kurallarını aşağıda gösterildiği gibi: hover sözde sınıf ve seçici kombinasyonuyla dönüştürmeyi denemek istiyoruz.
Çıktı beklendiği gibi. Bu araç, sözde sınıfı ve seçici kombinasyonunu & işaretiyle iç içe yerleştirir.
Sass ve SCSS limitleri
Bu aracın, CSS basamaklı yapımızı tanımada, bunları uygun şekilde Sass veya SCSS sözdizimine dönüştürmede bazı sınırlamaları vardır. Ancak, kesinlikle hala iyileştirme için yer var.
CSS3 @font-face
kuralını dönüştürebilseydik harika olurdu. Ancak, genel olarak bu araç, Sass’a yeni başlayanlar için birçok iyi yerden biridir. Eski CSS’nizi dönüştürün ve Sass veya SCSS sözdiziminde nasıl yapıldığını göreceksiniz.