@extend içinde !optional Etiketi SASS'te

Bir seçiciyi genişletirken, @extend direktifi doğru şekilde çalışmadığında bir hata alabilirsiniz. Örneğin, aşağıdaki koda sahipseniz:

style.scssa.info {
  @extend .main;
}

Hiçbir seçici .main içermiyorsa, derleme sırasında bir hata oluşacaktır. Böyle bir durumda, seçici dizilerini birleştirmemiz gerekir, bunun için @extend direktifini kullanırız.

Ayrıca, .main içeren seçici şu şekilde olursa (h1.main) da hata olacaktır, bu da a ve h1 arasındaki çakışma ile açıklanır.

Bu nedenle, gerekirse, @extend direktifinin seçiciden sonra yazılan isteğe bağlılık etiketi !optional kullanarak yeni seçiciler oluşturmamasına izin verebilirsiniz. Örneğin:

style.scssa.info {
  @extend .main !optional;
}