Sass mixin / include

mixin / include

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 / include 인자(Arguments)

전 예시와 다르게 속성은 동일하지만 값은 때마다 다르게 주고 싶다면 인자를 설정해준다.

사용방법 :
@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;
}