Question

少

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

输出

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

这意味着＆＃34;所有标签的父母都有.landscape和.list＆＃34;

少

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

输出

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

这意味着＆＃34;所有标签都有类＆＃39; landscape＆＃39;而且他们的父母有.list＆＃34;

这是有道理的。但如果我删除＆＃34; a＆＃34;来自这些选择器的标签，＆＃39;＆amp;＆＃39;只更改.list和.landscape的连接顺序。

重点是什么？我何时应该使用＆amp; .class，何时应该使用class。＆amp; ？

Answer 1

Less中的&表示父选择器。因此，无论您将&放在哪里，它都会将其替换为CSS中的parent选择器，如果您之前有空格的话。

如果没有，即在&之前没有给出空格，它就会成为孩子，并在你的情况下将选择器与其父级一起追加。

参考文献：

Answer 2

文章"LESS CSS: Secrets of the Ampersand"详细说明了差异。我将重点介绍关键用途：

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

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

我认为，如果你可以围绕&的这种用法进行思考，那么所有其他用途都会变得明显。

少 - “＆amp;”的目的是什么？在嵌套选择器之后

2 个答案: