Sass veya scss ile haşir neşir olan herkesin karşılaştığı bir sorun da birden fazla nested seçici içinde parent elemanın scope'unun kaybedilmesidir. Bu sorunu parent elamanı bir değişken'e atayarak çözmek mümkün.

Önce bu sorunu örnek bir kod üzerinde görelim. Bir card component'ımız olduğunu ve bu component'in normal ve küçük olmak üzere iki varyasyonunun olduğunu düşünelim.

.card {
  border-radius: 4px;
  color: #000;
  font-size: 16px;

  &.small {
    font-size: 13px;

    &-icon {
      margin-right: 4px;
    }
  }
}

Kodun üstünden geçerek başlayalım. .card isminde bir seçici oluşturduk ve bu seçicinin küçük varyasyonunda olmasını istediğimiz özellikleri & parent seçicisi ile belirttik. İlk bakışta herhangi bir sorun gözükmüyor gibi.

Kodun compile edilmiş haline bakalım ve hatayı görelim.

.card {
  border-radius: 4px;
  color: #000;
  font-size: 16px;
}

.card.small {
  font-size: 13px;
}

.card.small-icon {
  margin-right: 4px;
}

Evet gördüğünüz gibi kodun derlenmiş halinde .card.small-icon bir seçicisi var. Aslında bizim asıl amacımız .card-small .card-icon seçisini elde etmekti. & seçicisinin block scope'a sahip olmasından kaynaklı olarak böyle bir çıktı elde etmiş olduk. Yani her yeni block'ta & parent seçisinin değeri değişiyor.

Şimdi .card seçicisini bir değişkene atayarak kodumuzu güncelleyelim.

.card {
  $self: &;

  border-radius: 4px;
  color: #000;
  font-size: 16px;

  &.small {
    font-size: 13px;

    #{$self}-icon {
      margin-right: 4px;
    }
  }
}

Şimdi kodumuzun derlenmiş haline tekrar bakalım.

.card {
  border-radius: 4px;
  color: #000;
  font-size: 16px;
}

.card.small {
  font-size: 13px;
}

.card.small .card-icon {
  margin-right: 4px;
}

Tam da istediğimiz çıktıyı almış olduk. Umarım faydalı bir içerik olmuştur 😊.