在伪类的 scss 类中使用的 & 有什么区别？

如何解决在伪类的 scss 类中使用的 & 有什么区别？

这两种 scss 实现有什么区别？

{{1}}

哪个是错的？

解决方法

& 在 Sass 中最常见的用法之一是 pseudo class selectors。其中包括 :hover、:active 和 :focus 随附的选择器，例如 <a> 和 <input>。

在您的示例中，这是 scss 中的正确语法

.button {
    &:hover{
    }
}

在 CSS 中它被转换为

.button:hover{
}

还有第二个，这个不对。

.button {
    :hover{
    }
}

转换为：

.button :hover{
}

这不是我们使用它的目的

,

& 在 Sass（和 Less）中是一个非常有用的特性。嵌套时使用。当你知道如何使用它时，它可以是一个很好的节省时间，或者当你挣扎并且可以用常规 CSS 编写相同的代码时有点浪费时间。

让我们考虑一个基本的嵌套：

.parent {
  .child {}
}

这编译为：

.parent .child {}

当您进行嵌套并且想要创建更具体的选择器时，& 会派上用场，例如具有两个两个类的元素，如下所示：

.some-class.another-class { }

您可以在嵌套时使用 & 执行此操作。

.some-class {
  &.another-class {}
}

---

SCSS 中的 & 用于移除层次结构。空间有很大的不同。该空间将使其查找子元素的 :hover 状态，而不是 button 的 :hover 状态。

就你而言，如果你有这种方式：

.button {
  :hover{
  }
}

.button {
  &:hover{
  }
}

输出将是：

.button {
}
.button :hover {
}

.button {
}
.button:hover {
}

您可以在 SassMeister - The Sass Playground! 中查看这些内容。