薩斯未能@extend與家長選擇創建選擇

Question

我需要建立某種方式與SCSS和佔位符做CSS輸出

這是輸出，我想

.myclass { 
    color: silver; 
} 
.myclass-gold { 
    color: gold; 
} 

---

當我嘗試這一個SCSS placeholder這樣

%placeholder { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend %placeholder !optional; 
} 

我只得到這樣的結果

.myclass { 
    color: silver; 
} 

黃金部分完全被丟棄。

---

我需要一個佔位符，因爲我用很多像選擇a.myclass，input.myclass等，不想從這些

分解@export如果我不使用佔位符，但隨機選擇和採取一些extry字節-輸出不正確的，無論是

ae739ab7 { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend ae739ab7 !optional; 
} 

產生

ae739ab7, .myclass { 
    color: silver; 
} 
ae739ab7 ae739ab7-gold, .myclass ae739ab7-gold { 
    color: gold; 
} 

---

和

ae739ab7 { 
    color: silver; 
    &-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend ae739ab7 !optional; 
} 

給我

ae739ab7, .myclass { 
    color: silver; 
} 
ae739ab7-gold { 
    color: gold; 
} 

現在缺少這裏總是選擇.myclass-gold

一些魔術這可能不知？

Answer 1

僅擴展精確匹配的工作。當你這樣寫：

%placeholder { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

什麼你真的創建是這樣的：

%placeholder { 
    color: silver; 
} 

%placeholder %placeholder-gold { 
    color: gold; 
} 

所以，當你寫：

.myclass { 
    @extend %placeholder !optional; 
} 

它只會延長%placeholder選擇，而不是%placeholder-gold選擇器。爲了讓您正在尋找的行爲，你必須每一個佔位符選擇單獨擴展：

%placeholder { 
    color: silver; 
    @at-root #{&}-gold { 
    color: gold; 
    } 
} 

@mixin placeholder { 
    & { 
     @extend %placeholder; 
     @at-root #{&}-gold { 
      @extend %placeholder-gold; 
     } 
    } 
} 

.myclass { 
    @include placeholder; 
} 

輸出：

.myclass { 
    color: silver; 
} 
.myclass-gold { 
    color: gold; 
}