css - 通过另一个 Mixin 参数值包含一个 SASS Mixin

Question

我有这个:

如您所见，我目前有一个包含按钮样式混合宏的条件，无论如何我可以自动包含一个吗？例如:

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

Answer 1

看到上面的标记，我假设您已经尝试过插值但它不起作用。只是一个想法 - 不会 extend在这种情况下更合适？即扩展具有特定圆度的单个 button-* 混合。

话虽这么说，您已经对按钮 $color 进行了参数化，但您正在后退一步，根据变量值添加了预定义混合的额外复杂度!我假设您已经开始使用 button-blue...button-tree 混入，然后需要一个 $circle切换？

事实上，如果您在 button 混入之外使用 button-blue...button-tree，我会说将“多个 ifs”开关逻辑抽象一次到像

这样的函数指令将是最易于维护的

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