嵌套选择器中的供应商前缀

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来逗号所有的选择器，但是我希望它能在嵌套的较少的选择器中工作。

Answer 1

免责声明：和往常一样，我不建议在供应商的前缀中使用更少的混合器。它们最好留给库，如无前缀或自动前缀。这个答案只是为了说明如何使用更少的方法来处理类似的事情。

正如您已经发现的(并在注释中提到)，供应商前缀选择器的分组将无法工作，因为当用户代理遇到一个它不理解的选择器时，它将删除整个规则。您可以在this answer中阅读更多有关它的信息。

这并不是较少编译器的问题。它将像预期的那样编译和输出代码。

避免一次又一次地编写四个选择器块的方法之一是将供应商的前缀选择器放入一个混合体中，其中接受一个规则集作为参数，然后在需要的地方调用它。下面是供您参考的示例代码。

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