CSS LESS 占位符混合答案

【问题标题】：CSS LESS Placeholder MixinCSS LESS 占位符混合
【发布时间】：2014-07-06 21:08:30
【问题描述】：

我想创建一个占位符 mixin，如下所示。但是，这在 LESS 版本 1.7.0 中无法编译。

.placeholder(...) {
    ::-webkit-input-placeholder: @arguments;
    :-moz-placeholder: @arguments;
    ::-moz-placeholder: @arguments;
    :-ms-input-placeholder: @arguments;
}

【问题讨论】：

这不会编译，因为它会尝试生成格式错误的 CSS。

标签： css less mixins

【解决方案1】：

Mixin 允许任何占位符 css 规则。

.placeholder(@rules) {

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

示例用法：

.placeholder({
    color: #0000FF;
    text-transform: uppercase;
});

【讨论】：

您使用的是哪个 LESS 版本 - 它无法为我编译
适用于我的 lessc -v 2.0.0。与号和传入规则使这种方式比接受的答案更有用。
感谢漂亮的语法！ @rules() 之后的括号有什么作用？我认为括号仅用于参数混合？
为什么是两个moz-placeholders？
@GianPaJ 一个用于firefox 4-18（一个带有单个冒号），另一个带有两个冒号用于firefox 19+。

【解决方案2】：

您缺少占位符选择器周围的大括号。

样式应该如下：

.placeholder(@color) {
    ::-webkit-input-placeholder {
        color: @color;
    }
    :-moz-placeholder {
        color: @color;
    }
    ::-moz-placeholder {
      color: @color;
    }
}

【讨论】：

【解决方案3】：

输入占位符是选择器，而不是属性，因此它们的 CSS 语法是 placeholder { ... }，而不是您尝试生成的 placeholder: ...。

如果你解决了这个问题：

.placeholder(...) {
    ::-webkit-input-placeholder {border:@arguments}
    ::-moz-placeholder {border:@arguments}
    :-ms-input-placeholder {border:@arguments}
}

它会编译，当你调用它时：

.placeholder(solid; 1px; blue;);

它会生成这个 CSS：

::-webkit-input-placeholder {
  border: solid 1px #0000ff;
}
::-moz-placeholder {
  border: solid 1px #0000ff;
}
:-ms-input-placeholder {
  border: solid 1px #0000ff;
}

（我只是将border: 作为通用 CSS 属性的示例，与它对输入对象的实际影响无关）

【讨论】：

这有效并阐明了@arguments 参数的使用。这帮助我完成了允许任何占位符规则的最终混合。