[SCSS] @mixin과 @include로 스타일 그룹 사용하기

개념

지난 글에서 SCSS의 스타일 변수를 사용하는 방법에 대해서 배웠었다. '$'를 이용하여 자주 사용되거나 특정한 값을 변수로 선언하여 나중에 수정할 때 한 번에 쉽게 하기 위해 변수를 사용했었다. 하지만, 변수는 오직 한 가지 값만 담을 수 있다는 한계가 있다. 한 가지 값이 아닌 그냥 스타일 그룹 전체를 변수로 담을 수 있는 방법은 없을까?

@mixin과 @include를 이용하여 스타일 그룹 전체를 변수로 담고 불러올 수 있다. 코드 예시를 보면서 이해해보자.

 

방법

기본

/* SCSS */
@mixin default {
    margin: 0;
    padding: 0;
    color: #333;
    display: block;
    width: 100px;
    height: 50px;
}

body {
    @include default;
}

/* Compiled CSS */
body {
    margin: 0;
    padding: 0;
    color: #333;
    display: block;
    width: 100px;
    height: 50px;
}

사용 방법은 그리 복잡하지 않다. 변수처럼 @mixin '이름'으로 전체 스타일 그룹을 변수로 잡고, 사용할 때는 @include를 통해 불러와주기만 하면 된다. 그럼 컴파일된 CSS에서는 @mixin에 담긴 스타일이 그대로 컴파일되는 것을 볼 수 있다.

 

응용

/* mixin.scss */
@mixin btn {
    width: 100px;
    line-height: 1.6em;
    font-size: 18px;
    background-color: #fff;
}

/* style.scss */
@import "btn";
$a-btn-color: red;
$b-btn-color: blue;
$c-btn-color: green;

button {
    @include btn;
    &.a-btn {
        border: 1px solid $a-btn-color;
        color: $a-btn-color;
    }
    &.b-btn {
        border: 1px solid $b-btn-color;
        color: $b-btn-color;
    }
    &.c-btn {
        border: 1px solid $c-btn-color;
        color: $c-btn-color;
    }
}

보통 @mixin을 사용할 때는 따로 'mixin.scss' 파일을 만들어서 style.scss에 @import "mixin"을 해주는 편이다.

3개의 버튼이 있다고 할 때, 버튼의 공통 스타일을 @mixin으로 담아서 button 스타일로 주었고, 각각 버튼의 스타일은 변수를 이용하였다.

 

매개변수

/* SCSS */
@mixin border($width, $style, $color){
    border: $width $style $color;
}
@mixin ft-color($ft-color){
    color: $ft-color;
}

.btn {
    @include border(1px, solid, red);
    @include ft-color(#666);
}

/* CSS */
.btn {
    border: 1px solid red;
    color: #666;
}

@mixin은 매개 변수를 사용할 수도 있다. @mixin 이름($매개 변수) 형식으로 @include할 때 매개 변수에 특정 값을 넣어서 매번 불러올 때마다 다른 스타일 값을 줄 수 있다. 보통은 margin, padding, border 등 속성 값이 여러 개의 경우에 사용되는 편이다.

 

1. 스타일 그룹 전체를 변수로 잡을 때는 @mixin, 불러올 때는 @include
2. @mixin '이름'($변수1, $변수2); / @include '이름'(값1, 값2);