【Sass】mixinで引数を省略したときプロパティを出力しないようにする

たとえばこんなときに、

style.scss

@mixin foo($w, $h){
 width: $w;
 height: $h;
}

div {
 @include foo(100px);
}

こうなってほしい

style.css

div {
 width: 100px;
}

引数の初期値をnullにする

Sass(scss)では引数の後ろに初期値を指定できます。

style.scss

@mixin foo($w, $h: 50px){
 width: $w;
 height: $h;
}

div {
 @include foo(100px);
}

style.css

div {
 width: 100px;
 height: 50px;
}

この初期値にnullを指定すると実装したかった動きになります。

style.scss

@mixin foo($w, $h: null){
 width: $w;
 height: $h;
}

div {
 @include foo(100px);
}

style.css

div {
 width: 100px;
}

ちなみに

引数に真偽値を指定することもできます。

style.scss

@mixin foo($w, $h: true){
 width: $w;
 @if($h){
  height: 80px;
 }
 @else {
  height: 40px;
 }
}

div {
 @include foo(100px, false);
}

style.css

div {
 width: 100px;
 height: 40px;
}