占位符 mixin Less

Question

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

.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 中时，它就可以工作了。有没有人发现错误。我不明白

Answer 1

来自css-tricks.com：

That would be nice, but the problem is that when a browser doesn’t understand a selector, it invalidates the entire line of selectors (except IE 7).

因此您必须将占位符选择器分开：

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

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

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

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

占位符 mixin Less

Placeholder mixin Less

css

placeholder

less