☰

オプションの引数を持つSassミックスインを作成する 質問する

tag-icon • tag-icon sass
オプションの引数を持つSassミックスインを作成する 質問する

私は次のようなミックスインを書いています:

@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 "";

渡された値がない場合には$inset何も出力されないように、ミックスインを書き直すにはどうすればよいでしょうか?

ベストアンサー1

よりドライな方法

そして、一般的に、引用符を削除する巧妙なトリックです。

@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でリストを単一の引数としてミックスインに渡す

おすすめ記事