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

Posted 2021-05-01

我一直在尝试像疯子一样让下面的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;
}

答案

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

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

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

    &-second {
        background: green;
    }

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

另一答案

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

减

.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"。

另一答案

这显然应该在LESS中起作用。我几个月前在LESS.js github上提出了一个问题。

Link to Github issue

同时，我推荐使用七阶段max的解决方案，只需将类放在一起就像这样：

&-first, &-second {}

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

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

另一答案

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