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

现在我想在Less中使用嵌套选择器：

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

不幸的是，这不像我预期的那样有效。当我只使用一个选择器（没有逗号＆＃39; s）时，它工作正常，但这意味着我仍然需要为每个前缀制作四个嵌套选择器，这是无效的。如何用尽可能少的行来完成Less中第一个CSS块的效果？

注意： 完整的代码块更广泛，嵌套规则更多。当然，对于这个例子，我可以只使用CSS来逗号选择所有选择器 - 但我希望它能够在嵌套的Less-selector中工作。

Answer 1

免责声明：与往常一样，我不建议使用Less mixins作为供应商前缀的东西。它们最好留给像无前缀或自动前缀这样的库。这个答案只是为了说明使用Less。
可以处理类似的事情

就像您已经发现的那样（并在评论中提到），供应商前缀选择器的分组将不起作用，因为当用户代理遇到它不理解的选择器时将丢弃整个规则。您可以在this answer中了解有关它的更多信息。

这对Less编译器来说不是问题。它将按预期编译和输出代码。

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

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

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

1 个答案: