#14 - SCSS 재사용 - 인수의 기본값

재사용에 인수의 기본값 설정

인수의 기본값을 설정했을 경우, 인수 입력란을 비워두면 기본값이 입력된다.

기본 구조

SCSS

@mixin size ($매개변수 : 기본값){
    스타일;
}

 

 

---

Include에 값이 없을 경우

SCSS

@mixin size ($w : 200px, $h : 300px){
    width : $w;
    height : $h;
}
.class{
    @include size;
}

Compile 된 CSS

.class{
    width : 200px;
    height : 300px;
}

 

 

---

Include에 값이 일부 있을 경우

SCSS

@mixin size ($w : 200px, $h : 300px){
    width : $w;
    height : $h;
}
.class{
    @include size($h:400px);
}

Compile 된 CSS

.class{
    width : 200px;
    height : 400px;
}

 

 

---

Include에 값이 전부 있을 경우

SCSS

@mixin size ($w : 200px, $h : 300px){
    width : $w;
    height : $h;
}
.class{
    @include size(100px,200px);
}

Compile 된 CSS

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