Post
아이콘 추가를 함수화
HTML
<div class="test">
테스트
</div>
SCSS(_mixins)
@mixin icon($code) {
content: $code;
font-family: "Material Icons";
}
SCSS
@import "mixins";
.test {
height: 200px;
border: 1px solid black;
p {
&:before {
@include icon("shopping_cart");
}
&:after {
@include icon("\e897");
}
}
}
ON BROWSER
중앙 정렬을 함수화
SCSS(_mixins)
@mixin icon($code) {
content: $code;
font-family: "Material Icons";
}
@mixin center() {
display: flex;
justify-content: center;
align-items: center;
}
SCSS
@import "mixins";
.test {
height: 200px;
border: 1px solid black;
@include center();
p {
&:before {
@include icon("shopping_cart");
}
&:after {
@include icon("\e897");
}
}
}
ON BROWSER
'CSS & SCSS related' 카테고리의 다른 글
| SCSS Custom Variables Function & Loop (0) | 2023.01.22 |
|---|---|
| SCSS Loop Statement (0) | 2023.01.21 |
| SCSS Custom Variables (0) | 2023.01.21 |
| SCSS Basic Rules (0) | 2023.01.21 |
| SCSS Custom Variables Mixins (0) | 2023.01.21 |