4

我有这个简化的 Less 脚本

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

input {
    .placeholder();
}

.placeholder {
    margin-top: 20px;
}

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

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？

编辑：我现在看到我应该阅读手册并且在文档的第一页上几乎可以看到所有东西都可以被视为混合。

4

3 回答 3

2

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

引用较少的网站：

定义多个具有相同名称和参数数量的 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：提取自7-phases-max在Less GitHub 问题线程中发布的解决方案。

对于特定用例，一种可能的解决方法是隔离未命名范围内的冲突类，这样它们就不会干扰外部名称：

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

input {
    .placeholder();
}

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

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

于 2014-10-14T07:47:21.243 回答
1 
@mixin placeholder(@color: #333333) {
    &::-webkit-input-placeholder  { color: @color; }
}

input {
    @include placeholder();
}

.placeholder {
    margin-top: 20px;
}

那应该工作。

于 2014-10-13T23:21:16.290 回答
-1

因此，如果我理解正确，您只想在占位符上添加 20px 吗？改为将 padding-top 添加到输入中。

input {
    padding-top: 20px;
}
于 2014-10-14T00:26:42.710 回答