İç içe Seçici kullanımı (Nesting)

Önceki örneklerde incelediğimiz gibi Sass veya Scss yazmanın en keyifli tarafı iç içe yazılan seçicilerdir. Sass ile yazılmış bir koda baktığınız zaman standart yazılmış bir CSS kodundan daha okunaklı olduğunu hemen fark edersiniz.

Tüm asıl seçici ve sözde (:hover, :before vb.) seçicileri Sass ile kullanmak mümkün. Şimdi aşağıdaki HTML senaryosu için küçük bir örnek yaparak nesting konusunu biraz daha açalım.

HTML:

<div class="container">
	<div class="row">
		<a href="#">Test Link</a>
	</div>
</div>

SCSS:

.container {
	width: 200px;
	border: 1px solid #cc6699;

	.row {
		width: 150px;

		a {
			color: #cc6699;

			&:hover {
				color: #000;
				text-decoration: none;
			}
		}		
	}			
}				

SASS:

.container
	width: 200px
	border: 1px solid #cc6699

	.row
		width: 150px

		a
			color: #cc6699

			&:hover
				color: #000
				text-decoration: none

ÇIKTI:

.container {
	width: 200px;
	border: 1px solid #cc6699;
}
.container .row {
	width: 150px;
}
.container .row a {
	color: #cc6699;
}
.container .row a:hover {
	color: #000;
	text-decoration: none;
}

Örnekte de gördüğümüz gibi üstteki html elemanımızı standart CSS yazar gibi seçiyoruz CSS özelliğini tanımladıktan sonra bir altında bulunan eleman için alt satıra indent (girinti) vererek geçiyor ve CSS kodlarımızı yazıyoruz. Eğer hover, before, after, nth-child gibi sözde seçici kullanacaksak “&” operatörü ile birleştirip gerekli CSS kodlarımızı yazıyoruz.

Buraya kadar her şey normal, peki bir html elemanında iki class var, bunu nasıl seçeceğiz? Durum bu bahsettiğimiz gibi olunca, az önceki örneğimizde gördüğümüz “&” operatörü devreye giriyor. Bununla ilgili aşağıdaki HTML senaryosundan yola çıkarak küçük bir örnek yapalım.

HTML:

<div class="kutu">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="kutu renkli">
	<p>Lorem ipsum dolor sit amet.</p>
</div>

SCSS:

.kutu {
	width: 300px;
	overflow: hidden;

	p {
		font-size: 16px;
		line-height: 24px;
	}	

	&.renkli {
		border: 1px solid #cc6699;

		p {
			color: #cc6699;
		}
	}		
}			

SASS:

.kutu
	width: 300px
	overflow: hidden

	p
		font-size: 16px
		line-height: 24px

	&.renkli
		border: 1px solid #cc6699

		p
			color: #cc6699

ÇIKTI:

.kutu {
	width: 300px;
	overflow: hidden;
}
.kutu p {
	font-size: 16px;
	line-height: 24px;
}
.kutu.renkli {
	border: 1px solid #cc6699;
}
.kutu.renkli p {
	color: #cc6699;
}

Örneğimizde “renkli” class’ına sahip elemanı ve altındaki p etiketi için ayrıca özel bir CSS yazdık.

Yazıda yapılan örnekleri buradan indirebilirsiniz.

Bir sonraki bölümde yorum satırlarından bahsedeceğiz.