Sass’ın temel yazım kurallarından biriside iç içe (nested) kullanımdır. CSS ile kod yazarken girintiler çok önemli değildir. Biz daha iyi bir düzen için girintileme yapıyorduk ama bu girintiler CSS için bir şey ifade etmiyordu. Sass’ta ise girintilerin bir anlamı ve işlevi var.

CSS ile kod yazarken ebeveyn ve çocuk seçicileri ilişkilerini ve seçici önem sırasını düzenlemek için kodlarımızda aşağıdaki gibi bir düzen kuruyorduk.

Genel bir menü kodu:

ul {
listy-style: none;
margin: 0;
padding: 0;
}

ul li {
margin-left: 10px;
}

ul li a {
color: blue;
text-decoration: none;
}

ul li a:hover {
color: red;
}

ul li a:before {
content: '';
display:block;
}

yukarıda basit bir menü kodunu nasıl yazdığımızı gösterdik. Kodu incelediğimizde her satır ebeveyn ve çocuk seçicileri iletişimini belirtmek durmundayız. Sass burada çok güzel bir hareket yapıyor ve bu tekrardan bizi kurtarıyor. Yukarıdaki kodu Sass ile yazalım.

//renkleri buraya yazalım
$blue: blue
$red: red

ul
listy-style: none
margin: 0
padding: 0

li
margin-left: 10px

a
color: $blue
text-decoration: none

&:hover
color: $red

&:before
content: ''
display: block

daha kolay yazım, temiz görünüm ve anlaşılır kod. İlk seçici solda dururken çocuk seçicileri bir sekme (tab) içerden başlayacak şekilde kodluyoruz.

Sözde sınıf ve elementleri ise ve imi (&) ile bitişik yazıyoruz. &:hover, &:before, &:first-child vd.

Ben bir sekmeyi 4 boşluk olacak şekilde kullanıyorum. 2 olarak kullanan da var. İki olarak kullananların kodu bana çok karışık geliyor.

Çok fazla iç içe seçici kullanımı kod okunurluğunu azaltıyor. Çözüm olarak bence bir prensip kararı alıp dört iç içe sekmede kendimizi sınırlamalıyız.

.birinci-seviye
.ikinci-seviye
.ucuncu-seviye
.dorduncu-seviye

Böyle bir karar alıp uygulamak projelerinizde sizi rahatlatacaktır.

Ve imi (&) ile ebeveyn seçicisi

Sass ve imi (&) ile ebeveyn seçicisini referans alan bir yapıyı destekler. CSS’te bir çok defa aradığımız bir özellik olan ebeveyn seçme işi Sass sayesinde erişme imkanımız var.

ul
margin: 0

.ie8-fix &
margin: -2px

CSS kodu;

ul {
margin: 0;
}
.ie8-fix ul {
margin: -2px;
}

İnternet Explorer 8 sürümünde margin sorunumuz olduğunu düşünün. CSS ile bu sorunu aşmak için altında veya ayrı bir dosyaya yazıyoruz. Bu kontrolü zorlaştırıyordu. Sass’daki kullanım ile daha derli toplu çözüm oluşturmuş oluruz. Bir çok kullanım yerinin olduğu ebeveyn seçicisi süper bir artı özellik.

Kardeş seçicisi

Genel kardeş ve bitişik kardeş seçicisi için

h1, 
h2,
h3
margin: 0

h1
& + h2
margin-top: 1em

gibi yazıldığı gibi.

h1, 
h2,
h3
margin: 0

h1
+ h2
margin-top: 1em

şeklindeki yazımı da Sass destekler. Benzer şekilde ~, > kullanılabilir.

BEM kullanımı

BEM benzeri seçici kullanımını Sass 3.3’den sonra desteklemektedir.

BEM, CSS seçicilerini isimlendirme ve sınıflandırma için kullanılan çok daha kesin, şeffaf ve bilgilendirici bir yöntemdir.

.person--woman {
display: block;
}
.person__hand {
display: block;
}
.person__hand--left {
display: inline;
}
.person__hand--right {
display: inline;
}

Şeklinde bir örnek daha açıklayıcı olur. Burada Sass’ın avantajı

.person

&--woman
display:block

&__hand
display:block

&--left
display:inline

&--right
display:inline

Tekrarlardan kurtulmuş oluyoruz. Ben bu kullanımda şöyle bir sorun yaşadım: Seçicileri bulmak sıkıntı oluyor. Aramak zorlaşıyor.

İç içe özellik kullanımı

Yukarıdaki gibi iç içe seçici kullanımı benzeri iç içe özellik kullanımında da vardır.

h1 {
text-align: "left";
text-transformation: "capatalize";
text-indent: 20px;
}

Sass ile yazarken

h1
text:
align: 'left'
transformation: 'capatalize'
indent: 20px

Seçicilerde olduğu gibi tekrarlardan kurtulmuş oluruz.

Kalın sağlıcakla.

Kaynaklar

Bower'ı kaldırdık

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kend...… Devamını oku

HTML Öznitelikleri ve DOM özellikleri

22 November 2017 tarihinde yayınlandı.

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.