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高

Less中的＆符和double and符有什么区别？

3 个答案: