嵌套供應商前綴更少選擇器

Question

我正在嘗試使用盡可能低的效率。現在我想更換一個佔位符的顏色，我通常在CSS會做這樣的：

input::-webkit-input-placeholder /* WebKit, Blink, Edge */ 
{ 
    color: #000000; 
} 

input:-moz-placeholder /* Mozilla Firefox 4 to 18 */ 
{ 
    color: #000000; 
} 

input::-moz-placeholder /* Mozilla Firefox 19+ */ 
{ 
    color: #000000; 
} 

input:-ms-input-placeholder /* Internet Explorer 10-11 */ 
{ 
    color: #000000; 
} 

現在我想用嵌套選擇欠我可以使用：

input{ 

&::-webkit-input-placeholder, /* WebKit, Blink, Edge */ 
&:-moz-placeholder, /* Mozilla Firefox 4 to 18 */ 
&::-moz-placeholder, /* Mozilla Firefox 19+ */ 
&:-ms-input-placeholder /* Internet Explorer 10-11 */ 
{ 
    color: #000000; 
} 
} 

不幸的是，做不像我預期的那樣工作。當我只使用一個選擇器（沒有逗號）時，它可以正常工作，但這意味着我仍然必須爲每個前綴創建四個嵌套選擇器，這是無效的。我怎樣才能在較少可能的行中實現第一個CSS塊的效果？

注意：完整的代碼塊是更廣泛的，有更多的嵌套規則。當然，對於這個例子，我可以用CSS來逗逗所有的選擇器 - 但我希望它可以在嵌套的Less-selector中工作。

Answer 1

免責聲明：像往常一樣，我不建議使用較少混入的供應商前綴的東西。他們最好留給圖書館，如前綴免費或自動前綴。這個答案只是爲了展示如何使用Less來處理類似的事情。

就像你已經發現了（並在評論中提到），供應商選擇前綴的分組將無法正常工作，因爲當它遇到一個選擇，它不理解用戶將丟棄整個規則。你可以在this answer中閱讀更多關於它的信息。

這不是Less編譯器的問題。它會按預期編譯和輸出代碼。

避免一次又一次寫入四個選擇器塊的一種方法是將供應商前綴選擇器放入一個混合接受規則集作爲參數，然後在需要時調用它。以下是供您參考的示例代碼。

.placeholder(@rules){ /* no need to repeat, just copy paste this once in your code */ 
    &::-webkit-input-placeholder /* WebKit, Blink, Edge */ 
    { 
    @rules(); 
    } 
    &:-moz-placeholder /* Mozilla Firefox 4 to 18 */ 
    { 
    @rules(); 
    } 
    &::-moz-placeholder /* Mozilla Firefox 19+ */ 
    { 
    @rules(); 
    } 
    &:-ms-input-placeholder /* Internet Explorer 10-11 */ 
    { 
    @rules(); 
    } 
} 

/* call it wherever required */ 
input{ 
    .placeholder({ 
       color: red; 
       }) 
} 
input.somethingelse{ 
    .placeholder({ 
       color: black; 
       padding: 4px; 
       }) 
}