#15 - SCSS 재사용 - 가변인수(...)

 

가변 인수

인수의 개수를 몇 개로 지정해야 할지 불확실할 때 가변 인수(...)를 사용한다.

사용 예시 1

설정한 인수보다 많은 인수 입력 시, 마지막 매개변수가 입력되는 자리에 초과 된 인수가 들어가게 된다.

SCSS

@mixin test($w, $h, $bg...){
    width : $w;
    height : $h;
    background: $bg;
}

.class(
    @include test(
        100px,
        200px,
        url("./img/main1.png"),
        url("./img/main2.png"),
        url("./img/main3.png")
    );
)

Compile 된 CSS

.class(
    width : 100px;
    height : 200px;
    background : 
        url("./img/main1.png"),
        url("./img/main2.png"),
        url("./img/main3.png");
    );
)

 

사용 예시 2

변수를 인수 자리에 입력할 경우, 가변인수를 사용하여 입력한다.

SCSS

@mixin test($w, $h, $o : .5){
    width : $w;
    height : $h;
    opacity : $o;
}
.class{
    /* 변수 선언 */
    $test-contents : 100px, 200px, .8;
    /* 인수 자리에 삽입 */
    @include test($test-contents...);
}

Compile 된 CSS

.class{
    width : 100px;
    height : 200px;
    opacity : .8;
}

 

사용 예시 3

필요 값만 변수로 전달할 경우, 가변 인수를 사용한다.

SCSS

@mixin test($w, $h, $o : .5){
    width : $w;
    height : $h;
    opacity : $o;
}
.class1{
    $test-contents : (width : 300px, height : 400px);
    @include test($test-contents...);
}
.class2{
    @include test((width : 500px, height : 600px)...);
}

Compile 된 CSS

.class1{
    width : 300px;
    height : 400px;
    opacity : .5;
}
.class2{
    width : 500px;
    height : 600px;
    opacity : .5;
}