SCSS
[SCSS] SCSS 데이터 종류, 반복문(@each), 재활용(@content)
mikrw
2023. 2. 8. 05:38
데이터 종류
반복문
@each
// List Data
$fruits: (apple, orange, banana, mango);
.fruits {
@each $fruit in $fruits {
li.#{$fruit} {
background: url("/images/#{$fruit}.png");
}
}
}
.fruits li.apple {
background: url("/images/apple.png");
}
.fruits li.orange {
background: url("/images/orange.png");
}
.fruits li.banana {
background: url("/images/banana.png");
}
.fruits li.mango {
background: url("/images/mango.png");
}
재활용
@content
@mixin icon($url) {
&::after {
content: $url;
@content;
}
}
.icon1 {
// icon Mixin의 기존 기능만 사용
@include icon("/images/icon.png");
}
.icon2 {
// icon Mixin에 스타일 블록을 추가하여 사용
@include icon("/images/icon.png") {
position: absolute;
};
}
.icon1::after {
content: "/images/icon.png";
}
.icon2::after {
content: "/images/icon.png";
position: absolute;
}