占位符 mixin Less答案

【问题标题】：Placeholder mixin Less占位符 mixin Less
【发布时间】：2015-08-04 17:20:54
【问题描述】：

目前我尝试创建一个较小的混入来为占位符添加样式。这些值通过对象传递。我的解决方案现在看起来像这样：

.placeholder(@rules){
   &::-webkit-input-placeholder, &:-moz-placeholder, 
   &::-moz-placeholder,&:-ms-input-placeholder{
      @rules();
   }
}

我尝试像这样使用这个 mixin：

input{
   .placeholder({color:green})
}

所以生成较少：

input::-webkit-input-placeholder, input:-moz-placeholder, 
input::-moz-placeholder, input:-ms-input-placeholder{
    color: green;
}

已经按照我想要的方式生成了代码，但是没有输入想要的效果。但是，当我剪切代码并将其填充到 devtools 中时，它就可以工作了。有没有人发现错误。没看懂

【问题讨论】：

你不应该将不同的供应商前缀放在同一个选择器列表中（因为浏览器只能理解它自己的前缀并将外来元素视为无效的 CSS，所以整个列表不被接受为无效）。跨度>

标签： css less placeholder

【解决方案1】：

来自css-tricks.com：

这很好，但问题是当浏览器不理解选择器时，它会使整行选择器无效（IE 7 除外）。

所以你必须分开占位符选择器：

.placeholder(@rules){
   &::-webkit-input-placeholder{
      @rules();
   }

   &:-moz-placeholder{
      @rules();
   }

   &::-moz-placeholder{
      @rules();
   }

   &:-ms-input-placeholder{
      @rules();
   }
}

【讨论】：