[SCSS] @content로 @mixin에 스타일 속성 추가하기

문제

/* SCSS */
@mixin box-sizing {
    & > div {
        width: 100px;
        height: 100px;
        border-radius: 1px solid #000;
    }
}

.box-wrap {
    @include box-sizing;
}

/* CSS */
.box-wrap > div {
    width: 100px;
    height: 100px;
    border-radius: 1px solid #000;
}

HTML 구조는 큰 틀인 .box-wrap안에 작은 div가 여러 개 있다고 가정하겠다. 우리는 작은 div들의 공통된 속성을 @mixin을 이용하여 주려고 한다. 전에 배웠듯이 @mixin 안에 div 요소들에게 줄 스타일 속성들을 묶어 선언하였고, .box-wrap에 @include 해주었다. 컴파일된 CSS 파일을 확인해보면 우리가 예상했던 대로 잘 적용된 걸 볼 수 있다. 그런데 만약, div 요소들에게 background-color 속성을 뒤늦게 추가하려고 한다면 어떻게 해야 할까?

 

방법

@mixin 자체에 추가하기

/* SCSS */
@mixin box-sizing {
    & > div {
        width: 100px;
        height: 100px;
        border-radius: 1px solid #000;
        background-color: pink;
    }
}

.box-wrap {
    @include box-sizing;
}

/* CSS */
.box-wrap > div {
    width: 100px;
    height: 100px;
    border-radius: 1px solid #000;
    background-color: pink;
}

가장 간단한 방법은 그냥 @mixin 변수 자체에 background-color 속성을 추가해버리는 것이다.

하지만, 이 방법은 예시처럼 매우 단순한 구조 혹은 @mixin을 재활용하지 않고 Only 1개에만 적용할 경우에만 유용하다. 이 경우 @mixin을 굳이 쓸 필요가 없을뿐더러 코드 낭비만 하게 될 뿐이다.

 

@mixin과 별개로 밑에 새로 추가하기

/* SCSS */
@mixin box-sizing {
    & > div {
        width: 100px;
        height: 100px;
        border-radius: 1px solid #000;
    }
}

.box-wrap {
    @include box-sizing;
    & > div {
        background-color: pink;
    }
}

/* CSS */
.box-wrap > div {
    width: 100px;
    height: 100px;
    border-radius: 1px solid #000;
    background-color: pink;
}

@include로 스타일을 불러온 뒤, 밑에 다시 & > div로 스타일 속성을 추가하는 방법도 있다.

하지만, 이것은 가독성도 떨어지고 뭔가 한 번에 끝낼 수 있는 일을 두 번에 끝내는 방법이라 매우 비효율적이다.

 

@mixin안에 @content 추가하기

/* SCSS */
@mixin box-sizing {
    & > div {
        width: 100px;
        height: 100px;
        border-radius: 1px solid #000;
        @content;
    }
}

.box-wrap {
    @include box-sizing {
    	background-color: pink;
    }
}

/* CSS */
.box-wrap > div {
    width: 100px;
    height: 100px;
    border-radius: 1px solid #000;
    background-color: pink;
}

이 방법은 @mixin 자체에 @content를 넣고, @include로 불러올 때 그 안에서 새로운 요소를 추가하는 방법인데, 쉽게 생각하면 @mixin이라는 만원 버스에 @content라는 빈자리를 만들어놓고 뒤늦게 탑승하는 승객에게 그 빈 자리를 내어주는 원리인 셈이다. @include의 중괄호에 @content에 넣을 속성을 넣어주기만 하면 된다.

(참고로 @content 자리에는 1개가 아닌 여러 개의 속성을 넣을 수 있다.)

 

1. @mixin abc { .....; @content }
2. @include abc { @content 자리에 넣을 속성들 };
3. mixin이라는 버스에 content라는 빈자리를 만들어놓으면, 뒤늦게 탑승하는 승객에게 빈 자리를 내어줄 수 있다.