在 SASS 中设置要与默认 mixin 一起使用的新变量值答案

【问题标题】：Set new variables values to be used with default mixin in SASS在 SASS 中设置要与默认 mixin 一起使用的新变量值
【发布时间】：2017-10-01 06:36:46
【问题描述】：

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

/// 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）。

我想做的是在我的网站中为单个按钮使用此默认混合，该按钮将具有特定的 $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 并包含新的变量值，它就可以工作......

@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;

【问题讨论】：

标签： variables sass zurb-foundation overriding mixins

【解决方案1】：

简单的解决方案基本上是在每次调用时都覆盖样式混合

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

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

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

【讨论】：