SASS에서의 @each 지시문
스타일을 객체 목록에 적용하기 위해
지시문 @each를 사용합니다. 다음과 같이 작성합니다:
@each $var (변수) in (값 목록)
이 지시문의 핵심은 목록의 각 값을
변수 $var에 할당한 다음,
각 스타일 안에서 이를 출력하는 것입니다.
예시를 살펴보겠습니다:
@each $picture in winter, spring, summer, autumn {
img .#{$picture} {
background-image: url('/images/#{$picture}.jpg');
}
}
컴파일 결과:
img .spring {
background-image: url("/images/spring.jpg");
}
img .summer {
background-image: url("/images/summer.jpg");
}
img .autumn {
background-image: url("/images/autumn.jpg");
}
다음 코드의 컴파일 결과가 어떻게 될지 설명해 보세요:
@each $link in menu, navbar, footer {
link .#{$link} {
color:red;
}
}
