如何制作扩展父级的 Sass mixin？答案

【问题标题】：How to make Sass mixin that extends parent?如何制作扩展父级的 Sass mixin？
【发布时间】：2014-05-11 01:29:58
【问题描述】：

您可以在 Sass 中硬编码扩展选择器，例如：

.box {
    width: 100px;
    height: 100px;
    color: red;
}

.box-green {
    @extend .box;
    color: green;
}

然后.box-green 具有.box 的所有属性，还有自己的附加属性。我想要做的是编写一个通用的 mixin 来做这件事 - 接受一个类，添加它自己的所有属性，并为类名添加一个修饰符。如果类似这样的伪代码有效（它没有），那将是理想的。

.box {
    width: 100px;
    height: 100px;
    color: red;

    @include make-modifier(&, green) {
        color: green;
    }
}

@mixin make-modifier(parent, modifier-name) {
   .#{$parent}-#{$modifier-name} {
        @content;
   }
}

有办法吗？即使只有最新版本也没关系。

【问题讨论】：

标签： css sass mixins

【解决方案1】：

我会建议像这样更简单的解决方案

@mixin box($color:"") {
    width: 100px;
    height: 100px;
    color: red;

    @if $color !="" {
      &-#{$color} {
        color: $color;
      }
    }
}

.box {
  @include box(green);
}

输出将是：

.box {
  width: 100px;
  height: 100px;
  color: red;
}
.box-green {
  color: green;
}

一个例子：http://sassmeister.com/gist/04cb6a6fe14972c3ffe4

【讨论】：