为什么有时我们需要 space 在 & 和 之间。在 css 反应

Question

&:hover{
  cursor: pointer;

  & .background-image {
    transform: scale(1.1);`enter code here`
    transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  & .content{
    opacity: 0.9;
  }
}"

就像在 &.background-image 中我们有 space

&.large{
  height: 380px;
}"

但我们这里不给space

Answer 1

嵌套时&总是引用parent选择器。将 & 视为已删除并替换为 parent 选择器。

如果你在 & 符号后留下 space，这意味着你现在指的是它的后代，如果你不留下 space，这意味着你指的是你的 [=38] =]本身。

例如

.container {
  &.red {
     background-color: red;
  }
}

在这种情况下，如果 .container 元素在您的 DOM 中还附加了 red class，这会将红色背景应用到它。

示例 2

.container {
  & .red {
     background-color: red;
  }
}

在这种情况下，它会使任何 child 的背景成为 red-colored，它在 .container 元素中有一个 .red class .

更多细节和复杂示例here