SASSda @each direktivasi
Uslubni obyektlar ro‘yxatiga qo‘llash uchun
@each direktivasidan foydalaniladi.
Uni quyidagicha yoziladi:
@each $var (o‘zgaruvchi) in (qiymatlar ro‘yxati)
Ushbu direktivaning ishlash mohiyati shundan
iboratki, u ro‘yxatdagi har bir qiymatga
$var o‘zgaruvchisini o‘rnatadi,
so‘ngra uni har bir uslubda chiqaradi.
Misolni ko‘rib chiqamiz:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Kompilyatsiya natijasi:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Quyidagi kodning kompilyatsiya natijasi qanday bo‘lishini tushuntiring:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
