css - 別の Mixin パラメータ値を介して SASS Mixin を含める

Question

私はこれを持っています：

ご覧のとおり、現在、ボタン スタイルの mixin を含める条件がありますが、自動的に含めることができるものはありますか? 例えば：

@mixin button($color)
  @include button-#{$color}

Answer 1

上記のマークアップを見て、すでに補間を試みたことがあり、うまくいかなかったと思います。考えただけです-このコンテキストでは拡張がより適切ではないでしょうか? つまり、個々のmixinbutton-*を特定の丸みで拡張します。

そうは言っても、ボタンは既に$colorパラメーター化されていますが、変数の値に応じて事前定義されたミックスインを含めるという複雑さのレベルをさらに追加することで、一歩後退しています! button-blue...ミックスインから始めて、トグルbutton-treeを必要とする要件が発生したと思いますか?$circle

実際、ミックスインの外でbutton-blue...を使用している場合は、「複数の if」スイッチ ロジックを一度抽象化して、次のような関数ディレクティブにするのが最も保守しやすいと思います。button-treebutton

@function include-button-mixin($color) {
  @if $color == blue
    @include button-blue
  ...
}