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

【问题标题】：Sass/Scss @mixin for element's selector as wellSass/Scss @mixin 也用于元素的选择器
【发布时间】：2014-06-21 02:40:57
【问题描述】：

假设我必须有以下 CSS：

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

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

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

div {
   @include myAmazingMixer
}

【问题讨论】：

标签： css sass

【解决方案1】：

绝对！您可能缺少的一件事是 & 选择器 (which references the parent selector)

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

div {
   @include myAmazingMixer
}

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

【讨论】：

【解决方案2】：

创建一个 mixin，例如：@mixin highlight{color: white;}，然后如果需要为任何其他元素赋予白色，你可以通过提及 @include highlight 来简单地将这个 mixin 添加到特定的类中

【讨论】：

【解决方案3】：

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

【讨论】：

创建一个 mixin，如：@mixin highlight{color: white;} 然后如果需要为任何其他元素赋予白色，你可以简单地将这个 mixin 添加到那个特定的类中提到