Sass'ta iç içe(nested) kullanımı

30 Eylül 2015

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

Daha fazla oku

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.