Question

我有这个简化的Less脚本

.placeholder(@color: #333333) {
    &::-webkit-input-placeholder  { color: @color; }
}

input {
    .placeholder();
}

.placeholder {
    margin-top: 20px;
}

通过本地编译器或winless online less compiler运行时的输出是

input {
  margin-top: 20px;
}
input::-webkit-input-placeholder {
  color: #333333;
}
.placeholder {
  margin-top: 20px;
}

确保所需的输出

input::-webkit-input-placeholder {
  color: #333333;
}
.placeholder {
  margin-top: 20px;
}

这是一个错误还是我错过了什么？

结果它让我觉得我不能拥有与mixins同名的CSS选择器和默认值。

在使用我的站点特定代码编译Bootstrap时，我遇到了这个问题。在这种特殊情况下，我可以解决它，但随着项目的增长，我包括其他项目，我无法成像，我必须跟踪任何具有默认值的mixin？

编辑：我现在看到我应该阅读手册，并在first page of the docs上看到所有内容都可以视为混音。

Answer 1

在Less中，一切在技术上都是mixin，无论我们是用parantheses（如参数）还是没有parantheses（如CSS类选择器）来编写它。两者之间的唯一区别是，当存在parantheses时，除非从选择器块中调用，否则不会输出其中存在的属性。

引用较少的网站：

定义具有相同名称和参数数量的多个mixin是合法的。 Less将使用所有可适用的属性。

在这种情况下，由于另一个mixin具有其唯一参数的默认值，因此在没有任何参数的情况下调用时，这两个属性都可以应用，因此无法避免它发生。

变通方法解决方案：解决此问题的一种可能解决方案是将所有此类冲突规则包含在父选择器中（如body）。

.placeholder(@color: #333333) {
    &::-webkit-input-placeholder  { color: @color; }
}

input {
    .placeholder();
}

body{
    .placeholder{
        margin-top: 20px;
    }
}

已编译的CSS：

input::-webkit-input-placeholder {
    color: #333333;
}
body .placeholder {
    margin-top: 20px;
}

选项2：摘自seven-phases-max中Less GitHub Issue thread发布的解决方案。

对于特定用例，可能的解决方法之一是隔离未命名范围内的冲突类，以免他们干扰外部名称：

.placeholder(@color: #333333) {
    &::-webkit-input-placeholder  { color: @color; }
}

input {
    .placeholder();
}

& { // unnamed namespace
    .placeholder {
        background: #ffffff;
    }
} // ~ end of unnamed namespace

注意：以上是GitHub线程的直接复制/粘贴，没有任何修改，以免篡改信息。

Answer 2

@mixin placeholder(@color: #333333) {
    &::-webkit-input-placeholder  { color: @color; }
}

input {
    @include placeholder();
}

.placeholder {
    margin-top: 20px;
}

应该有用。

Answer 3

所以，如果我理解正确，你只想在占位符上添加20px？添加填充顶部来代替输入。

input {
    padding-top: 20px;
}

Less mixin和CSS选择器之间的名称冲突

3 个答案: