LESS - 嵌套选择器之后“＆”的目的是什么[复制]

This question already has an answer here:

这个问题在这里已有答案:

Using the ampersand (SASS parent selector) inside nested selectors [duplicate] 3 answers

在嵌套选择器中使用&符号(SASS父选择器)[复制] 3个答案

Less

.list a{
    .landscape&{
        height: 100%;
    }
}

Outputs

.landscape.list a {
  height: 100%;
}

Which means "all a tags whose parents have both .landscape and .list"

这意味着“所有标签的父母都有.landscape和.list”

Less

.list a{
    &.landscape{
        height: 100%;
    }
}

Outputs

.list a.landscape {
  height: 100%;
}

Which means "all a tags which have class 'landscape' and whose parents have .list"

这意味着“所有标签都有类'景观'并且其父母有.list”

And that makes sense. But if I remove the "a" tag from those selectors, the '&' only changes the concatenation order of .list and .landscape.

这是有道理的。但是,如果我从这些选择器中删除“a”标记,则“&”仅更改.list和.landscape的连接顺序。

What's the point ? When should I use &.class and when should I use class.& ?

重点是什么 ?我什么时候应该使用&.class,什么时候应该使用class。&?

2 个解决方案

#1

The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:

文章“LESS CSS:Ampersand的秘密”很好地详细说明了差异。我将重点介绍关键用途:

Attach a class to an existing selector

将类附加到现有选择器

Change state based on parent classes

根据父类更改状态

Filter a nested selector to only match certain elements

过滤嵌套选择器以仅匹配某些元素

Avoid repetition when selecting repeated elements

选择重复元素时避免重复

Simplify combinatorial explosions

简化组合爆炸

The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:

后者是我的最爱。我用它来处理一些疯狂的IE问题。看一下这个:

/**
 * Add a top border to paragraphs,
 * but remove that border when a preceding paragraph already has one.
 */
p  {
    border-top: 1px solid gray;
    & + & {
        border-top: 0;
    }
}

I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.

我想如果你可以把你的想法包含在这个用法中,那么所有其他用途都会变得明显。

#2

The & in Less denotes the parent selector. So wherever you put the &, it replaces it with the parent selector in the CSS, if you have a space before it.

&in Less表示父选择器。因此,只要你放置了&,它就会用CSS中的父选择器替换它,如果你之前有空格的话。

If not, i.e., no space is given before the &, it becomes the child and appends the selector with its parent like in your case.

如果没有,也就是说,在&之前没有给出空格,它就变成了孩子,并在你的情况下将选择器和它的父项一起追加。

References:

Less CSS Secrets-of-the-Ampersand

较少的CSS秘密的&符号

Parent Selector

#1