Question

我一直在努力让一个疯子得到以下LESS声明，但现在我担心这不会发生：/所以我现在转向你们这些人最后寻求帮助！

我有以下声明：

.top{
    &-first{
        background:black;
        &-item{
            color:white;
        }
    }
    &-second{
        background:green;
        &-item:extend(.top-first-item){}
    }
}

我希望得到以下输出：

.top-first {
    background: black;
}
.top-first-item,
.top-second-item{
    color: white;
}
.top-second {
    background: green;
}

但不幸的是它不能编译，而是这样：

.top-first {
    background: black;
}
.top-first-item{
    color: white;
}
.top-second {
    background: green;
}

Answer 1

LESS目前不支持扩展“连接名称”选择器（基本上，.top &-first &-item被解释为三个不同的选择器元素，extend找不到单个选择器。

针对您的特定情况的解决方法：

.top {
    &-first {
        background: black;
    }

    &-second {
        background: green;
    }

    &-first, &-second {
        &-item {
            color: white;
        }
    }
}

Answer 2

另一种选择是将名称分解为单独的类：

<强> LESS

.top{
    &.first{
        background:black;
        &.item{
            color:white;
        }
    }
    &.second{
        background:green;
        &.item:extend(.top.first.item){}
    }
}

CSS输出

.top.first {
  background: black;
}
.top.first.item,
.top.second.item {
  color: white;
}
.top.second {
  background: green;
}

当然需要将您的html名称 从class="top-first-item"更改为class="top first item"。

Answer 3

这显然应该在LESS工作。我几个月前就LESS.js github提出了一个问题。

Link to Github issue

与此同时，我推荐使用七阶段最大的解决方案，只需简单地将类放在一起：

&-first, &-second {}

但是你不能把第二个抽象成另一个文件。

另一个解决方案是创建一个"extends.less"文件，在这个文件中，您可以使用时间段找到自己的小片段。

Answer 4

只需使用'all'后缀即可。示例：＆amp;：extend（.top-first-item all ）;

LESS：扩展先前定义的嵌套选择器

4 个答案: