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的所有子元素。

Answer 2

创建一个mixin，如：@mixin highlight {color：white;}然后如果任何其他元素需要给出一个白色你可以通过提及@include highlight

Answer 3

是的，你可以这样做。您可以创建一个mixin（一个css规则）并包含它。