为什么有时我们需要在 & 和 .在CSS反应[重复]

【问题标题】：why sometimes we need space between & and . in css react [duplicate]为什么有时我们需要在 & 和 .在CSS反应[重复]
【发布时间】：2022-01-16 14:11:44
【问题描述】：

&: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 我们有空间

&.large{
  height: 380px;
}"

但我们这里不给空间

【问题讨论】：

标签： reactjs sass

【解决方案1】：

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

如果你在 & 符号后面留一个空格，这意味着你现在指的是它的后代，如果你不留空格，这意味着你指的是你的父母本身。

例如

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

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

示例 2

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

在这种情况下，它将使任何子元素的背景变为红色，该子元素在.container 元素中具有.red 类。

更多细节和复杂示例here

【讨论】：