@at-root
- 태그 안에 사용하더라도 css로 컴파일 할 때 태그 안에 선언되는게 아닌 그 밖에 따로 선언될 수 있게 도와줌 / 가독성 ⬆️ , 중첩도 ⬇️
$colors: (
// var 별칭을 사용하여 map.key에 value 할당
"Book": var.$green,
"News": var.$yellow,
"Board": var.$brown,
"Favorite": var.$orange,
"Twitter": var.$blue,
);
// @each문을 활용하여 각각 선언하지 않고 컴파일될 때 css파일에 선언되게 하는 구문
@each $section, $color in $colors {
.accent#{$section} {
color: $color;
}
}
@each문
을 사용하여 반복 작업을 단순화 시킬 수 있다.
다음과 같은 결과가 나타난다.
.accentBook {
color: #abd375;
}
.accentNews {
color: #e8ca58;
}
.accentBoard {
color: #988574;
}
.accentFavorite {
color: #eea60a;
}
.accentTwitter {
color: #6aaee6;
}
// sprite 배경이미지
.sprite {
min-height: rem(60px);
background-image: url(./../assets/images/sprite_main.png);
background-repeat: no-repeat;
padding-left: rem(64px);
$sprites: Book, Board, News, Favorite, Twitter;
$x: 0;
$y: 0;
@each $sprite in $sprites {
//&는 상위 태그인 sprite를 의미
&#{$sprite} {
background-position: $x $y;
}
//반복 실행할 때마다 $y 값을 -115px만큼 더해 $y값 변경
$y: $y - 115px;
}
}