＆.class与＆.class

Question

＆。class vs＆.class：在两者之间放置空格会有所不同吗？

在我的sass文件中，我有以下代码：

.parentClass {
  &.childClass {}
}

他们希望我在childClass和'＆'符号之间放置一个空格：

.parentClass {
  & .childClass {}
}

有什么区别吗？

Answer 1

区别是：

.parentClass {
  &.childClass {}
}

实际上会生成选择器.parentClass.childClass，这意味着您正在选择具有两者类的元素，例如<div class="parentClass childClass">。您可能想不是。同时，这：

.parentClass {
  & .childClass {}
}

将编译为：

.parentClass .childClass {}

...将选择一个类别为childClass的元素的子元素，该元素是类别为parentClass的元素的子元素，例如：

<div class="parentClass">
    <div class="childClass"></div>
</div>

---

如@deceze所指出的，在您的简化示例中，&不是必需的，如果您只想暗示层次关系，因为它在语法上与以下内容相同：

.parentClass {
  .childClass {}
}

...也可以给您.parentClass .childClass {}。

Answer 2

在第二种情况下，放置“＆”符号没有意义，因为

.parentClass {
  & .childClass {}
}

和

.parentClass {
  .childClass {}
}

将产生与以下相同的已编译CSS：

.parentClass .childClass {
}