SCSS Nesting (İç İçe Seçici) Kullanımı

SCSS derslerimize kaldığımız yerden devam ediyoruz. Bu yazımda SCSS’de Nesting yani iç içe seçiciler konusunu anlatacağım.

İç içe seçiciler ile yazacağımız kodları hem daha düzenli olarak yazıyoruz hem de kod tekrarından kurtulmuş oluyoruz.

Zaten yazılan bir kodun kaliteli kod kategorisinde olması için gerekli en önemli kriterlerden bir tanesi de kod tekrarının yapılmamasıdır.

SCSS’de iç içe seçicileri şu şekilde kullanıyoruz:

SCSS Kodları

Gördüğünüz gibi nav etiketini bir defa yazıp içerisinde ul ve li etiketlerini kullandım. Bu kodun Css çıktısına bakalım.

Burada konunun anlaşılması için çok küçük kod örnekleri veriyorum. Bu yüzden bize sağlamış olduğu faydaları bu örnek üzerinden tam olarak anlayamayabiliriz. Ama büyük projelerinizde kullandıkça çok ciddi bir biçimde kod tekrarının önüne geçtiğini sizde göreceksinizdir.

İç içe seçiciler konusunda son olarak hover, link, visited, focus, active vb.. olayların nasıl kullanıldığına bakalım.

Normalde Css ile kodlarımızı şu şekilde yazıyoruz:

Yukarıdaki kodun SCSS karşılığı ise şöyle:

Gördüğünüz gibi hover, link, visited, focus, active vb.. olayları kullanırken ilk olarak “&” işaretini yazıp sonrasında “:”  işaretini yazıyoruz. Son olarakta olayı yani hover yazıyoruz.

SCSS’de Nesting kullanımı bu şekilde.

Şimdi konunun daha iyi anlaşılması adına bir yatay menü örneği yapalım.

Aynı menüyü 2 farklı şekilde yapacağım. 

Menünün son hali şu şekilde olacak:

scss-yatay-menu-yapimi

 ⇒  ul, li ve a etiketlerini kullanarak yatay menü yapımı

Html Kodları

Scss Kodları

SCSS kodunun Css Çıktısı

 ⇒  div ve a etiketlerini kullanarak yatay menü yapımı

Html Kodları

Scss Kodları

SCSS kodunun Css Çıktısı

Bu örnekleri incelediğinizde SCSS’de Nesting yani iç içe seçiciler konusunu daha iyi anlayacaksınızdır.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link