Question

我有来自Foundation 6``_buttons.scss```源文件的默认SASS mixin（实际上只有一部分）：

/// 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，它就可以工作......

@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

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

.class {
    @include button-base;
    margin: 0;
}

或者你需要像你说的那样覆盖mixin，它会起作用。同样，您可以简单地用您想要的变量覆盖$按钮边距

设置要在SASS中使用默认mixin的新变量值

1 个答案: