Less中的＆符号和双＆符号有什么区别？

Question

我试图在React的上下文中写Less。

以下代码有效：

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &:first-child { /* notice single ampersand */
        border-left: 2px solid #007aff;
    }
}

此代码也有效：

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
    border-left: 2px solid #007aff;
}

但是，以下代码不起作用：

.rt-tr-group .rt-tr:hover .rt-td {
    color: #fff;

    &&:first-child { /* notice double ampersand */
        border-left: 2px solid #007aff;
    }
}

我已经看到了代码库中其他地方使用的双符号，所以&&做了些什么。有人可以向我解释一下这个区别吗？

Answer 1

你见过的双＆符号可能是& + &或& ~ &，而不是&&，据我所知，后者在Sass中什么都不做。

使用& + &将允许您定位相同选择器的相邻兄弟，例如此SCSS：

.btn {
  ...
  & + & {
    margin-left: 15px;
    background: firebrick;
  }
}

...将编译为此CSS：

.btn {
  ...
}
.btn + .btn {
  margin-left: 15px;
  background: firebrick;
}

阅读更多关于双＆符号here at Team Treehouse的信息。

Answer 2

&&在几乎所有流行的编程语言中都是基本逻辑运算符AND的冗余，而单个&在SASS中专门用于连接CSS选择器。

在SASS的使用案例中连接或更精确：连接选择器与逻辑意义上组合两个条件非常不同。

进一步阅读：https://www.sitepoint.com/sass-basics-operators/和https://javascript.info/logical-operators

Answer 3

它可能是增加特异性：.thing.thing高于.thing