Question

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

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

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

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

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

Answer 3

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

样式应如下：

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

CSS LESS占位符Mixin

3 个答案: