SASS의 기능 mixin

mixin이란?

SASS기능중 하나로 CSS속성 여러개를 함수로 저장해서
태그마다 쉽게 적용할수있는 기능

@mixin button() {
    padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius: 14px;
    border: 1px solid red;
    color: black;
}

이렇게 함수를 적용하고

.btn-1{
    @include button();
}

태그에 함수를 적용하고 CSS로 변환하면

.btn-1{
    padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius: 14px;
    border: 1px solid red;
    color: black;
}

위에 처럼 된다.

mixin의 변수 지정

mixin은 변수도 지정할수있는데.
각 태그 마다 border와 color의 색깔을 바꾸고 싶다면

@mixin button($border,$color)
    padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius: 14px;
    border: 1px solid $border;
    color: $color;
}

위에 코드처럼 변수를 지정하고

.btn-1{
    @include button(red,red);
}
.btn-2{
    @include button(blue,blue);
}

이렇게 된다면
btn-1의 border과 color의 색상은 red로 바뀌고
btn-2의 border과 color의 색상은 blue로 바뀐다.

mixin의 변수가 지정이 안됬을때 디폴트 색상을 지정하는 방법

@mixin button($border : black,$color : black)
    padding: 10px 20px;
    cursor: pointer;
    background-color: inherit;
    border: 1px solid lightgray;
    border-radius: 14px;
    border: 1px solid $border;
    color: $color;
}

위에 코드처럼 $border과 $color에 값을 정할 경우

.btn-3{
    @include button();
}

@include를 btn-3에 넣을때 $border과 $color값을 안넣으면 위에 입력한 값 black이 된다.