css - 嵌套 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;
}

现在我想在 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;
 }
}

不幸的是，这并不像我预期的那样工作。当我只使用一个选择器(没有逗号)时，它工作得很好，但这意味着我仍然必须为每个前缀创建四个嵌套选择器，这效率不高。如何用更少的行数完成Less中第一个CSS block 的效果？

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

Answer 1

Disclaimer: As always I don't recommend using Less mixins for vendor prefixing stuff. They are best left to libraries like prefix-free or Auto-prefixer. This answer is just to show how similar things can be handled using Less.

就像您已经发现的那样(并在评论中提到)，对供应商前缀选择器进行分组将不起作用，因为用户代理在遇到它不理解的选择器时将删除整个规则。您可以在this answer中阅读更多相关信息。 .

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

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

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