css - Sass - @extend mixin，改变一个参数

Question

我是 Sass 的新手，所以如果这不是做这类事情的最佳方式，我深表歉意!

所以，我有一个按钮样式的 mixin，如下所示:

@mixin button ($bg, $color, $padding, $display: inline, $radius: 0, $transition: 0.2s) {    
  background: $bg;
  @if $radius > 0 {
    @include border-radius($radius)
  }
  color: $color;
  @if $display != inline {
    display: $display;
  }
  @if $padding > 0 {
    padding: $padding;
  }
  text-decoration: none;
  @include transition(all, $transition, linear);
    &:hover {
        @if lightness($bg) > 50% {
          background: darken($bg, 10%);
        } @else {
          background: lighten($bg, 10%);
        }
    }
}

还有一个按钮，像这样:

.btn {
   @include button(#095d94, #fff, 10px, inline-block);
}

但是，现在我需要另一个具有不同背景颜色的按钮。所以我想知道的是:有没有办法扩展一个类，并且只更改该类包含的 mixin 的一个参数，而不必这样做:

.btn2 {
  @extend .btn;
  background: #bad78d;
  &:hover {
      background: darken(#bad78d, 10%);
  }
}

是否可以输入另一种背景颜色？类似的东西，

.btn2 {
    $bg: #bad78d; //i know this doesn't work
    @extend .btn;
}

或者喜欢，

.btn2 ($bg: #bad78d) {
   @extend .btn; //this one doesn't even make sense, but I think I'm explaining what I need... ish.
}

Answer 1

我认为您在这里有两个选择。

此外，您还应尽量保持干燥，有时重新填充并没有什么错。因此，如果您的 mixin 不是太大，那么这样做就可以了:

    .btn {
       @include button(#095d94, #fff, 10px, inline-block);
    }

    .btn2 {
       @include button(#bad78d, #fff, 10px, inline-block);
    }

但只有当 .btn 和 .btn2 之间的差异很大时才需要这样做。

如果你只是想改变某些属性，你也可以只使用classig级联。

 .btn,.btn2 {
       @include button(#095d94, #fff, 10px, inline-block);
    }

.btn2 {
      background-color:#bad78d;   
      ...
    }