引用父在LESS多层嵌套(Referencing parent with multiple leve

我有以下LESS：

.container {
    .column, .columns {
        .one& {
            width: 40px;
        }
    }
}

当我编译我得到了我的CSS如下：

.one.container .column,
.one.container .columns {
    width: 40px;
}

但我希望得到：

.container .one.column,
.container .one.columns {
    width: 40px;
}

它会出现在父运算符（ & ）小于实际参考什么，我希望见到的祖父。 我是不是嵌套的事情正常吗？ 该文档不显示深嵌套多个级别的任何实例。 我能实现我的筑巢所需的输出？

我使用的是通过NPM安装lessc 1.3.3。

Answer 1:

想到这一点很重要&因为多了一个“出身”组合子，而不是一个“父”组合子的。 也就是说，它需要选择整个嵌套串到这一点（不管多少级深），并作为一个字符串替换支架的等价物。 因此，与您例缩小后的版本...

.container {
    .column {
        .one& {
            width: 40px;
        }
    }
}

......在该级别选择字符串.container .column 。 这是在的位置是什么“改为” & ，所以当您连接到开始 ，因为你在上面做什么，它就会附着在整个选择字符串的开头和你结束了你的：

.one.container .column {width 40px;}

但是，如果你从最终串连（之间没有空格&和. ）然后...

.container {
    .column {
        &.one {
            width: 40px;
        }
    }
}

...变为：

.container .column.one {width 40px;}

这最后一个是你真正想要的职业组合 ，虽然只是不太以相同的顺序，你所希望看到的。 但顺序并不重要，浏览器， .one.column或.column.one是相同的，那只是意味着应用了像这样两个单独的类的元素：

<div class="column one"></div>
<div class="one column"></div>

这两个是等价的，并且或者.one.column或.column.one作为选择将要选择两个元件，因为这两个元件具有两个类。

如果为了对你绝对重要的（你只是必须有你的CSS生成如你正在寻找），那么你就需要做一些像这样重复：

.container {
    .column {
       ...generic column code here...
    }
    .one {
        &.column {
            width: 40px;
            ...any other code dependent on combination of .one.column here...
        }
    }
}

文章来源: Referencing parent with multiple levels of nesting in LESS