如何让萨斯mixin延伸父母？

Question

你可以在像萨斯延伸的选择硬代码：

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

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

然后.box-green有.box所有属性，有自己的另外一个。我想要做的就是编写一个通用的混音器来完成这个任务 - 接收一个类，添加它自己的所有属性并在类名称中添加一个修饰符。如果像这样的伪代码的工作（它没有），这将是理想的。

.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