1. ホーム
  2. sass

[解決済み】オプションの引数を持つSass mixinの作成

2022-04-09 07:32:08

質問

こんな感じでMixinを書いています。

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

私が本当に望んでいるのは、呼び出されたときに、もし何もなければ $inset の値が渡された場合、何も出力されず、むしろ次のようにコンパイルされます。

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

の値がない場合、Mixinをどのように書き直せばよいのでしょうか? $inset を通過しても、何も出力されない?

どのように解決するのですか?

DRY'r流のやり方

そして、一般的には、引用符を消すというのがオチです。

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

SASS バージョン 3+ では unquote() :

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

こっちで拾ったんだ。 SASSでMixinにリストを単一引数として渡す。