LESS Bölüm 3 : Seçiciler

Bu makalemizde LESS deki seçicileri anlatacağım. Klasik CSS seçicileri de kullanılabilir, fakat LESS çok daha düzenli olacak ve sizi çok kod yazma zahmetinden kurtaracak. Seçim işlemi içinde yeniden seçim yapmak kod yazmayı kolaylaştıracak

Hover olayı

.buton
{
width:100px;
height:50px;
background-color:red;
font-size:25px;
line-height:50px;
text-align:center;
	&:hover
	{
	background-color:green;
	}
}

Bu kod ile sınıfımızın içinde & işaretini kullanarak kendimizi seçmiş olduk. Event olarak da hover eventi gerçekleştiğinde değişiklikler yaptık.

İç içe seçme CSS'de iç içe seçmek için .site .kutu gibi seçiciler kullanırdık. LESS bunu daha da kolaylaştırarak şu hale getiriyor;
.site
{
width:800px;
height:600px;
background-color:#ccc;
margin:30px auto;
	.kutu
	{
	margin:50px;
	width:50px;
	height:50px;
	background-color:red;
	}
}
LESS yazımı böyledir.

Buton örneğinin çıktısı;


Yorumlar


seçtiğimiz nesne içinde, yeniden bir nesne seçmek ve nesneye yeni özellik vermek, hem kod yazımını kolaylaştırıyor hem de kodu daha anlaşılır hale getiriyor

Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın