SASS(SCSS) 재활용 하기 @mixins, @include

sass에서 mixin은 스타일시트 전체에 걸쳐 스타일 블록을 정의하고 재사용하게 해 줍니다.

즉 반복되는 규칙을 따로 만들어서 사용하는 것입니다.

똑같은 규칙을 반복하여 작성하는 것보다는 mixin을 사용하여 한번만 스타일 그룹을 정의하고, 필요할 때 참조하여 사용합니다.

 

scss파일 위쪽 부분에 @mixin지시자를 이용하여  mixin을 정의합니다.

정의된 스타일을 넣고자 하는 곳에 @include지시자를 이용하며 믹스인을 참조할 수 있습니다.

 

@mixin을 사용하여 선언 :  @mixin 이름 (arguments) { ... } 

@include를 이용하여 사용 :  @include 이름 (arguments) 

 

/* scss */
@mixin title-style {    // mixin 정의
    margin: 30px 0 0 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.container h2 {
    @include title-style;    // mixin 사용
}


/* css - Compiled to */
.container h2{
    margin:30px 0 0 20px;
    font-size:24px;
    font-weight:bold;
    color:#333
}

 

믹스인 인자

믹스인은 함수처럼 arguments(인수)를 취할 수 있고 믹스인을 호출할 때 인자를 전달할 수 있습니다.

/* scss */
@mixin title-style($color) {    // mixin 정의. $color 인자
    margin: 30px 0 0 20px;
    font-size: 24px;
    font-weight: bold;
    color: $color;
}

.container h2 {
    @include title-style (#fad218);    // mixin 호출시 컬러값 인자(노란색)를 전달
}


/* css - Compiled to */
.container h2{
    margin:30px 0 0 20px;
    font-size:24px;
    font-weight:bold;
    color:#fad218    // 전달받은 컬러값으로 컴파일 됨
}

 

다중 인자

믹스인 선언 시 쉼표로 값을 구분하여 여러 개의 인자(다중 인자) 전달이 가능합니다.

아래 코드는 두 개의 다른 선택자로 믹스인을 호출하여 글자색과 폰트사이즈의 인자를 넘겨준 예입니다.

/* scss */
@mixin title-style($color, $fontSize) {    // 두개의 인자값 
    margin: 30px 0 0 20px;
    font-weight: bold;
    color: $color;
    font-size: $fontSize;
}

.container {
    h2 {
        @include title-style (#222, 24px);
    }
    h3 {
        @include title-style (#666, 18px);   
    }
}


/* css - Compiled to */
.container h2{
    margin:30px 0 0 20px;
    font-weight:bold;
    color:#222;    // 전달받은 컬러 인자값으로 스타일 적용됨.
    font-size:24px    // 전달받은 폰트사이즈 인자값으로 스타일 적용됨.
}
.container h3{
    margin:30px 0 0 20px;
    font-weight:bold;
    color:#666;    // 전달받은 컬러 인자값으로 스타일 적용됨.
    font-size:18px    // 전달받은 폰트사이즈 인자값으로 스타일 적용됨.
}

 

 

인자에 기본값 정의하기

믹스인에서 인자를 사용할 때 기본값을 정의하여 사용할 수 있습니다. 

기본 인자값을 정의하면 매번 정의할 필요 없이 편리합니다.

하지만 기본값을 정의하였더라도 덮어쓰기를 하여 인자를 넘길 수 있습니다. 

/* scss */
@mixin title-style($color, $background: #e2e2e2) {    // 인자에 기본값 정의
    margin: 30px 0 0 20px;
    font-weight: bold;
    color: $color;
    background: $background;
}

.container {
    h2 {
        @include title-style (#222);
    }
    h3 {
        @include title-style (#666, #5279ff);   
    }
}


/* css - Compiled to */
.container h2{
    margin:30px 0 0 20px;
    font-weight:bold;
    color:#222;
    background:#e2e2e2    // 기본값을 정의대로 컴파일됨.
}
.container h3{
    margin:30px 0 0 20px;
    font-weight:bold;
    color:#666;
    background:#5279ff    // 기본값을 정의했더라도 덮어쓰기 되어 컴파일됨.
}

 

 

믹스인은 CSS3사용 시 둥근 모서리나 그림자, 그라디언트 등을 사용할 때 stylesheet에 브라우저별 접두어(vender prefix)를 사용하여 작성해 놓으면 사용하기 쉽습니다. 벤더프리픽스 외워서 매번 작성하기에 번거로우므로 이때 미리 만들어둔 믹스인을 사용하면 가볍게 처리할 수 있습니다.border-radius나 box-shadow, flex 등에 사용하면 좋습니다.

/* scss */
@mixin round($radius:5px) {
    -wekit-border-radius: $radius;
      -moz-border-radius: $radius;
           border-radius: $radius;
}
.btn-round {
    width: 100px;
    height: 30px;
    border: 1px solid #ddd;
    @include round(10px);
}


/* css Compiled to */
.btn-round{
    width:100px;
    height:30px;
    border:1px solid #ddd;
    -wekit-border-radius:10px;
      -moz-border-radius:10px;
           border-radius:10px
}