Question

您可以在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;
   }
}

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

Answer 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

如何制作延伸父母的Sass mixin？

1 个答案: