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

2023年2月6日 294次阅读

我有这个简化的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上看到一切都可以被视为mixin.

最佳答案 在Less中,无论我们是用parantheses(如参数)还是没有parantheses(如CSS类选择器)编写它,所以在技术上一切都是mixin.两者之间的唯一区别是,当存在parantheses时,除非在选择器块内调用,否则不会输出其中存在的属性.

Quoting the Less Website:

It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply.

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

变通方法解决方案：解决此问题的一种可能解决方案是将所有此类冲突规则包含在父选择器(如正文)中.

.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发布的解决方案中提取.

For the particular use-case one of possible workarounds is to isolate conflicting classes in unnamed scope so they won’t interfere with external names:

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

input {
    .placeholder();
}

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

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

点赞