在LESS中引用具有多个嵌套级别的父级 [英] Referencing parent with multiple levels of nesting in LESS

问题描述

我有以下LESS:

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

编译时，我的CSS收到了以下内容:

When I compile I'm getting the following for my CSS:

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

但是我希望得到:

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

看来，LESS中的父运算符(&)实际上正在引用我希望成为祖父母的内容.我是否正确嵌套了东西?该文档未显示任何嵌套多于一层的示例.可以通过嵌套实现所需的输出吗?

It appears the parent operator (&) in LESS is actually referencing what I'd expect to be the grandparent. Am I nesting things properly? The docs don't show any examples of nesting more than one level deep. Can I achieve my desired output with nesting?

我正在使用通过npm安装的lessc 1.3.3.

I'm using lessc 1.3.3 installed via npm.

推荐答案

将&视为更多的父代"组合器，而不是父"组合器，这一点很重要.也就是说，它将选择器的整个嵌套字符串带到该点(无论深度有多高)，并等效于字符串替换持有人.因此，以您的示例的简化版本为例...

It's important to think of & as more of a "parentage" combinator, rather than a "parent" combinator. That is, it takes the whole nested string of selectors up to that point (no matter how many levels deep) and acts as the equivalent of a string replacement holder. So with a reduced version of your example...

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

...该级别的选择器字符串为.container .column.这是在&位置上被替换"的内容，因此，当您如上所述连接到开始时，它会附加到的开始 上. em>整个选择器字符串，您最终得到:

...the selector string at that level is .container .column. This is what is "replaced" in the position of the &, so when you concatenate to the beginning as you do above, it gets attached at the beginning of the whole selector string and you end up with your:

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

但是，如果您从 end 连接(&和.之间没有空格)，那么...

But if you concatenate from the end (no space between & and .) then...

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

...成为:

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

这最后一个确实是您想要的类组合，尽管只是顺序不尽相同.但是顺序对浏览器无关紧要，.one.column或.column.one相同，它仅表示一个元素，两个元素都适用于它，如下所示:

This last one is really the class combination you want, though just not quite in the same order you were hoping for. But order does not matter to the browser, .one.column or .column.one are the same, it just means an element that has both individual classes applied to it like so:

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

这两个都是等效的，并且.one.column或.column.one作为选择器将选择两个元素，因为两个元素都具有两个类.

Both of those are equivalent, and either .one.column or .column.one as a selector is going to select both elements, because both elements have both classes.

如果订单对您来说绝对至关重要(您只需要使生成的CSS符合您的要求)，那么您就需要像这样重复一遍:

If order is absolutely vital to you (you just must have your generated CSS be as you are seeking), then you would need to do a bit of repetition like this:

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

这篇关于在LESS中引用具有多个嵌套级别的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！