较少-“&"的目的是什么?嵌套选择器之后 [英] LESS - what is the purpose of "&" AFTER a nested selector

问题描述

少

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

输出

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

哪个意思是其父母同时具有.landscape和.list的所有标签"

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

少

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

输出

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

意思是所有具有'landscape'类且其父母具有.list的标签"

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

那是有道理的.但是，如果我从这些选择器中删除"a"标签，则&"仅更改.list和.landscape的串联顺序.

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

有什么意义?什么时候应该使用& .class，什么时候应该使用class. ?

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

推荐答案

文章详细说明了区别.我将重点介绍关键用途:

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

• 将类添加到现有选择器
• 根据父类更改状态
• 过滤嵌套选择器以仅匹配某些元素
• 选择重复元素时避免重复
• 简化组合爆炸

后者是我的最爱.我用它来处理一些疯狂的IE问题.检查一下:

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

/**
 * 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.

这篇关于较少-“&"的目的是什么?嵌套选择器之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！