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

Posted 2023-02-21

【中文标题】LESS：扩展先前定义的嵌套选择器

【英文标题】：LESS: Extend a previously defined nested selector

【发布时间】：2013-12-04 04:04:14

【问题描述】：

我一直像疯子一样努力让以下 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;

【参考方案1】：

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

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

.top 
    &-first 
        background: black;
    

    &-second 
        background: green;
    

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

【讨论】：

到目前为止，必须这样做！但是这里的github.com/less/less.js/issues/1597 问题确实应该得到解决！

【参考方案2】：

另一种选择是将名称分成不同的类别：

少

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

【讨论】：

不幸的是，这会破坏我的 css 逻辑，所以我不能这样做，应该是 1 类来统治它们：P

【参考方案3】：

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

Link to Github issue

同时，我建议使用 7-phases-max 的解决方案，只需像这样将类放在一起：

&-first, &-second 

但是你不能将第二个抽象出来到另一个文件中。

另一种解决方案是制作一个"extends.less" 文件，您可以在其中设置小型sn-ps，您会发现自己不时使用。

【参考方案4】：

只需使用“全部”后缀。示例：&:extend(.top-first-item all);

【讨论】：

哦，是的，我错了，sry