Question

我正在使用名为button的mixin，其签名如下：

@mixin button($expand: false,
              $background: $button-background,
              $background-hover: $button-background-hover,
              $color: $button-color, $style: solid)

我想创建一个mixin来包装一个名为sized-button的mixin，它需要一个额外的参数来指示基于$button-sizes地图的按钮大小。

地图如下所示：

$button-sizes: (
    tiny: 0.6rem,
    small: 0.75rem,
    default: 0.9rem,
    large: 1.25rem,
);

我希望使用变量参数，这样我就不必重新定义button mixin的参数。例如，这是我的第一次尝试：

@mixin sized-button($size: default, $buttonArgs...) {
  @if (map-has-key($button-sizes, $size)) {
    @include button($buttonArgs);
    font-size: map-get($button-sizes, $size);
  }
  @else {
   @warn "Invalid button size";
  }
}

但是，这样做似乎不起作用。例如，如果我将button个参数中的一个传递给sized-button mixin，我会收到错误：

@include sized-button($size: large, $expand: true);
Mixin sized-button has no parameter named $expand

有可能做我想做的事吗？

SASS wrap mixin添加额外的参数

0 个答案: