CSS LESS占位符Mixin

Question

我想要创建一个如下所示的占位符mixin。然而，在LESS 1.7.0版本中，这会编译失败。

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

- Matthew

---

这段代码无法编译，因为它试图生成格式不正确的CSS。 - helderdarocha

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

- Matthew

---

你使用的是哪个LESS版本 - 它对我来说无法编译。 - Möhre

对我来说使用lessc -v 2.0.0没问题。使用“&”和传入的规则使得这种方法比已被接受的答案更加有用。 - amwinter

[placeholder](@rules) { ... } 也能工作吗？我想省略冗余的class。 - connexo

为什么有两个 moz-placeholders？ - Gianfranco P.

@GianPaJ 一个适用于Firefox 4-18版本（只有一个冒号）的，另一个是适用于Firefox 19+版本的（有两个冒号）。 - h2ooooooo

Answer 2

输入占位符是选择器，而不是属性，因此它们的 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;
}

(我只是举例说明了一个通用的CSS属性——border:，并不涉及它对输入对象实际产生的效果)

- helderdarocha

---

这个有效并澄清了@arguments参数的使用。这有助于我完成最终mixin，允许任何占位符规则。 - Matthew

Answer 3

你忘记在占位符选择器周围加上花括号。

样式应该如下所示：

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

- Marc