＆.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 {}。