使用選擇薩斯3.3 SCSS多個@include語句

薩斯3.3引入了@at-root指令允許這樣的事情：使用選擇薩斯3.3 SCSS多個@include語句

//elements get appended with "__" and the $name 
@mixin e($name) { 
    @at-root #{&}__#{$name} { 
    @content; 
    } 
}

然後使用@include在SCSS：

.speech-bubble{ 
    color: purple; 
    @include e(header){ //header element 
    color: orange; 
    }

這將產生：

.speech-bubble { 
    color: purple; } 
    .speech-bubble__header { 
    color: orange; }

我的問題是，當試圖t Ò組合兩個或多個@include指令作爲選擇，或者如果添加元素然後@include

實施例處理的CSS：（這是粗糙的例子或遵從，不考慮真正的命名約定）

.active, 
.next, 
.prev { 
display: block; }

或

button.active {color:black}

這些打破編譯：

@include e(active), 
    @include e(next), 
    button @include e(prev) 
    { display: block; } 

button @include e(active) {color:black}

我嘗試了一些變化，但無濟於事......我當然可以個別化每個選擇器，但這不是最優化的。

任何想法如何做到這一點？

FYI：我使用SASS 3.3.0rc2

2013-12-19 sgraham

你可以顯示你想要實現的CSS輸出嗎？例如，'button @include e（prev）'返回button__prev，它不是一個類或一個有效的HTML標記，所以我不認爲你想要實現這個CSS輸出。 –

上有GitHub這個討論是值得一試。我認爲你的mixin在3.3中不起作用。

2014-02-25 16:46:54 user3271219

回答