css - Sass/Scss @mixin 也用于元素的选择器

Question

假设我必须具有以下 CSS:

div { }
div:hover {}
div:active {}

有没有办法创建一个@mixin 以便我可以使用

@mixin myAmazingMixer() {
    // Div stuff
    :hover { // Hover stuff }
    :active { // active stuff }
}

div {
   @include myAmazingMixer
}

Answer 1

当然!您可能缺少的一件事是 & 选择器 ( which references the parent selector )

@mixin myAmazingMixer() {
    // Div stuff
    &:hover { // Hover stuff }
    &:active { // active stuff }
}

div {
   @include myAmazingMixer
}

如果没有 &，您的 :hover 将应用于 div 的所有 child 元素。