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ı
|
1 2 3 4 5 6 7 8 9 10 11 |
nav { ul { list-style: none; } li { display: inline-block; } } |
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.
|
1 2 3 4 5 6 7 8 |
nav ul { list-style: none; } nav li { display: inline-block; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div a { float: left; color: #ffffff; padding: 12px 24px; text-decoration: none; } div a:hover { background-color: blue; } |
Yukarıdaki kodun SCSS karşılığı ise şöyle:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
div { a { float: left; color: #ffffff; padding: 12px 24px; text-decoration: none; &:hover { background-color: blue; } } } |
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:
⇒ ul, li ve a etiketlerini kullanarak yatay menü yapımı
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
ul { padding: 0; margin: 0; list-style: none; overflow: auto; background-color: cornflowerblue; li { float: left; a { display: inline-block; color: white; text-decoration: none; padding: 12px 24px; } &:hover { background-color: blue; } } li.active { background-color: blue; } } |
SCSS kodunun Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
ul { padding: 0; margin: 0; list-style: none; overflow: auto; background-color: cornflowerblue; } ul li { float: left; } ul li a { display: inline-block; color: white; text-decoration: none; padding: 12px 24px; } ul li:hover { background-color: blue; } ul li.active { background-color: blue; } |
⇒ div ve a etiketlerini kullanarak yatay menü yapımı
Html Kodları
|
1 2 3 4 5 6 7 |
<div> <a class="active" href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </div> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
div { background-color:cornflowerblue; overflow: hidden; a { float: left; color: #ffffff; padding: 12px 24px; text-decoration: none; &:hover { background-color: blue; } } a.active{ background-color: blue; } } |
SCSS kodunun Css Çıktısı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
div { background-color: cornflowerblue; overflow: hidden; } div a { float: left; color: #ffffff; padding: 12px 24px; text-decoration: none; } div a:hover { background-color: blue; } div a.active { background-color: blue; } |
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.
 Kullanımı){kind=link}