CSS’yi Sass ve SCSS’ye dönüştürme

sass scss css donusturme

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.

kodlama-editor
Haberi oku »
En iyi 10 HTML ve CSS editör

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:

1
header .nav {
2
margin-top: 50px;
3
}
4
header .nav li {
5
margin-left: 15px;
6
}
7
header .nav li a {
8
height: 30px;
9
line-height: 20px;
10
}

Bunu Sass sözdizimine dönüştürmek istiyoruz, bu da şuna dönüştürülür:

1
header .nav
2
margin-top: 50px
3
li
4
margin-left: 15px
5
a
6
height: 30px
7
line-height: 20px

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.

tipos-de-rodillos-para-pintar
Haberi oku »
Tipos de rodillos para pintar

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.

1
.footer {
2
color: #b3b3b3;
3
background-color: #fafafa;
4
}
5
.copy {
6
color: #b3b3b3;
7
background-color: #fafafa;
8
}

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.

1
.footer, .copy
2
color: #b3b3b3
3
background-color: #fafafa

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.

1
.inherit1
2
color: #b3b3b3
3
background-color: #fafafa
4
.footer
5
@extend .inherit1
6
.copy
7
@extend .inherit1

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.

1
.button:hover {
2
color: #ffffff;
3
background-color: #bf813d;
4
}
5
.button.active {
6
background-color: #986731;
7
}

Çıktı beklendiği gibi. Bu araç, sözde sınıfı ve seçici kombinasyonunu & işaretiyle iç içe yerleştirir.

1
.button
2
&:hover
3
color: #ffffff
4
background-color: #bf813d
5
&.active
6
background-color: #986731
arama-motoru-optimizasyonu-seo-nedir
Haberi oku »
Arama Motoru Optimizasyonu (SEO) nedir?

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.