Question

假设我有以下mixin：

@mixin foo {
    color: red;
}

这个mixin是在库中导入的，所以我不想触及源代码。但我想扩展mixin的功能，并添加我自己的样式。

所以我需要一种方法来创建一个具有相同名称的新mixin，同时保留原始输出但允许我添加新输出，如：

@mixin foo {
    color: blue;
}

@mixin foo {
    @include foo; // this is the original
    font-size: 14px;
}

当然以上不会做我想做的事，但有什么我可以做的吗？

Answer 1

我一直在玩，并提出这似乎有效：

@mixin foo() {
    color: red;
}

%foo {
    @include foo;
}

@mixin foo() {
    @extend %foo;
    font-size: 22px;
}

.foo {
    @include foo;
}

Answer 2

默认情况下，您可以使用@content;扩展/更改Mixin的代码块。

@mixin foo(){
  background:green;
  border:solid 5px black;
  @content;
}
div{
  width:200px;
  height:100px;
  &.one{
    +foo(){
      border:0;
    }
  }
}

https://jsfiddle.net/Thielicious/hhb09b61/

如何在保留原始输出的同时重新定义现有mixin？

2 个答案: