如何讓薩斯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