mixin은 묶음 스타일 속성을 재사용할 때 사용하는 문법이다.
사용방법 :
@mixin 명칭{속성}으로 재사용할 CSS 스타일 속성을 선언한다.
@include {명칭}으로 불러와 사용한다.
SASS
@mixin ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.btn_order {
display: block;
margin-top: 20px;
padding: 0 16px;
@include ellipsis;
}
CSS
.btn_order {
display: block;
margin-top: 20px;
padding: 0 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
전 예시와 다르게 속성은 동일하지만 값은 때마다 다르게 주고 싶다면 인자를 설정해준다.
사용방법 :
@mixin 명칭($이름1, $이름2) {속성}으로 선언한다.
@include 명칭 {값1, 값2};로 사용한다.
SASS
@mixin multi-ellipsis($font-size, $line-height) {
font-size: $font-size;
line-height: $line-height;
overflow: hidden;
}
.menu_desc {
margin-top: 4px;
letter-spacing: -0.4px;
@include multi-ellipsis(14px, 19px)
}
CSS
.menu_desc {
margin-top: 4px;
letter-spacing: -0.4px;
font-size: 14px;
line-height: 19px;
overflow: hidden;
}
핵심개념을 딱 집어주셔서 복기하기 좋은 것 같아요! 자꾸 까먹기 쉬운 개념인데 정리해주셔서 감사합니다:)