设置新变量值以与SASS中的默认Mixin一起使用

Question

我有这个默认的sass mixin(仅是实际的一部分(，来自基础6``_buttons.scss.scss``源文件：

/// Margin around buttons.
/// @type List
$button-margin: 0 0 $global-margin 0 !default;
@mixin button-base {
  @include disable-mouse-outline;
  display: inline-block;
  vertical-align: middle;
  margin: $button-margin;
}

如您所见，没有直接附带的参数：

@mixin button-base($button-margin) { ... }

...但是它使用了几个变量(例如$button-margin(，这些变量设置在其外部。

我想做的是将此默认的mixin用于我的网站中的一个按钮，该按钮将具有特定的$button-margin值。

到目前为止，这些解决方案尚未起作用：

// 1.
@include button-base($button-margin: 0);
// 2.
@mixin extended-button-base {
  $button-margin: 0;
  @include button-base;
}
@include extended-button-base;
// 3.
@mixin button-base {
  $button-margin: 0;
}
@include button-base();

关于如何实现这一目标而不必覆盖整个混合物的任何想法？因为如果我用包括新变量值覆盖整个混合物，它可以工作...

@mixin button-base {
  $button-margin: 0;
  @include disable-mouse-outline;
  display: inline-block;
  vertical-align: middle;
  margin: $button-margin;
  @if (type-of($button-padding) == 'map') {
    @each $size, $padding in $button-padding {
      @include breakpoint($size) {
        padding: $padding;
      }
    }
  }
  @else {
    padding: $button-padding;
  }
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: $button-radius;
  transition: $button-transition;
  font-size: map-get($button-sizes, default);
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
@button-base;

Answer 1

简单的解决方案基本上是每次称为

时都会覆盖样式。

@mixin button-base {
  @include disable-mouse-outline;
  display: inline-block;
  vertical-align: middle;
  margin: $button-margin;
}
.class {
    @include button-base;
    margin: 0;
}

，或者您需要按照您说的那样覆盖Mixin，它将起作用。同样，您只需通过想要的变量