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

Question

我有这个：

正如你所看到的，我目前有一个包含按钮样式混合的条件，无论如何我可以自动包含一个吗？例如：

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

Answer 1

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

话虽如此，您已经对按钮进行了$color参数化，但是您通过添加额外的复杂性来退后一步，即根据变量值包含预定义的 mixin！我假设您已经开始使用button-blue... button-treemixins，然后出现需要$circle切换的要求？

实际上，如果您在mixin之外使用button-blue... ，我会说将“多个 ifs”切换逻辑抽象为一个函数指令是最易于维护的，例如button-treebutton

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