较少-嵌套选择器后“＆”的作用是什么

Question

减

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

产出

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

这意味着“其父母同时具有.landscape和.list的所有标签”

减

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

产出

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

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

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

重点是什么 ？什么时候应该使用＆.class？什么时候应该使用class。＆？

Answer 1

的&欠表示父选择器。因此，无论您将放置在哪里，如果它前面有空格&，它都会用parentCSS中的选择器替换它。

如果不是，即在之前没有空格&，它将成为子项，并且像您的情况一样，将选择器及其父项追加。

参考文献：

• 更少的CSS秘诀
• 父选择器

Answer 2

文章“LESS CSS: Secrets of the &sand”详细介绍了其中的差异。我将重点介绍关键用途：

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

后者是我最喜欢的。我用它来处理一些疯狂的 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;
    }
}

我认为如果你能集中精力理解这个用法的&用途，那么所有其他用法都会变得显而易见。