Question

目前我尝试创建一个较少的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：

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

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

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

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

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

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

占位符mixin Less

1 个答案: