&.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 {}

...which将选择一个具有类childClass的元素，该类是具有类parentClass的元素的子元素，例如：

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

正如@deceze所指出的，在您简化的示例中，如果您只想暗示一种层次关系，那么&是不必要的，因为它在语法上与：

.parentClass {
  .childClass {}
}

...which还为您提供.parentClass .childClass {}。

Answer 2

对于第二种情况，放置"&“符号没有意义，因为

.parentClass {
  & .childClass {}
}

和

.parentClass {
  .childClass {}
}

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

.parentClass .childClass {
}