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;   
      ...
    }

Sass - @extend mixin，改变一个论点

1 个答案: