时间戳

首页 > 解决方案 > 在伪类的 scss 类中使用的 & 有什么区别？

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

问题描述

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

.button {
    :hover{
    }
}

.button {
    &:hover{
    }
}

哪一个是错的？

标签： csssasspseudo-class

解决方案

&Sass 中最常见的用途之一是pseudo class selectors. 其中包括:hover,:active和:focus发现的附带选择器，如<a>和<input>。

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

.button {
    &:hover{
    }
}

在 CSS 中它被转换为

.button:hover{
}

第二个，这个不正确。

.button {
    :hover{
    }
}

这被转换为：

.button :hover{
}

这不是我们使用它的目的

推荐阅读