본문 바로가기

달밤에 코딩하기/Sass & SCSS

#16 - SCSS 재사용 - 스타일 전달 (@content)

스타일 전달  (@content)

Mixin 부분에 선언하여 스타일 블록을 전달한다.

기본 구조

SCSS

@mixin 믹스인이름(){
    스타일;
    @content;
}
@include 믹스인이름(){
    스타일;
}

사용 예시

SCSS

@mixin test($c){
    background-color : $c;
    @content;
}
.class1{
    @include test(red){
        background-size : 100%;
    };
}
.class2{
    @include test(red)
}

Compile 된 CSS

.class1{
    background-color : red;
    background-size : 100%;
}
.class2{
    background-color : red;
}