Chỉ thị @each trong SASS
Để áp dụng kiểu
cho một danh sách các đối tượng, người ta sử dụng
chỉ thị @each. Nó được viết
như sau:
@each $var (biến) in (danh sách giá trị)
Bản chất hoạt động của chỉ thị này là
nó đặt mỗi giá trị
từ danh sách vào biến $var,
và sau đó xuất nó trong mỗi kiểu.
Hãy xem xét một ví dụ:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
Kết quả biên dịch:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ là gì:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
