ネストしたLessセレクタ内のベンダープレフィックス

Question

できるだけ効率的にLessを使用しようとしています。今私は、私は通常、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; 
} 
} 

残念ながらないこと私は期待どおりに動作しません。私は1つのセレクタ（カンマなし）を使用するとうまくいきますが、これは各プレフィックスに対して4つのネストされたセレクタを作成する必要があることを意味しますが、これは効率的ではありません。可能性の低い行でLessで最初のCSSブロックの効果をどのように達成できますか？

注：フルコードブ​​ロックは、より多くのネストされたルールで、より広範囲です。もちろん、この例ではCSSだけですべてのセレクタをカンマにすることができますが、ネストしたLessセレクタで動作させたいと思っています。

Answer 1

免責事項：いつものように私は、ベンダー接頭辞のものにはあまりミックスインを使用することはお勧めしません。彼らは、プレフィックスフリーや自動プレフィックスのようなライブラリに残すのが最善です。この答えは、Lessを使って似たようなことをどのように扱うことができるかを示すことです。

すでに判明（とコメントで述べた）きたようにそれはそれは理解していないことをセレクタに遭遇するとき、ユーザーエージェントは、ルール全体をドロップしますので、ベンダー接頭辞セレクタのグループ化は動作しません。 this answerで詳細を読むことができます。

これは、Lessコンパイラでは問題ありません。期待どおりにコードをコンパイルして出力します。

4つのセレクタブロックを何度も書くのを避ける方法の1つは、ベンダーのプレフィックス付きセレクタを引数としてルールセットを受け入れるミックスインに入れ、必要に応じて呼び出すことです。以下は参考用のサンプルコードです。

.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; 
       }) 
}