在不合并选择器的情况下重用SASS/SCSS中的样式

Question

如果我在SCSS中有一个样式定义,如下所示:

#someid {
    ...
    .message {
        ...
        &.error {
            // overrides of .message class
        }
    }
}

所以我在我的UI中显示某种消息,可以是普通消息(有.message类)或错误(有两个.message.error类).

现在我有一个不同的元素,以正常的错误方式显示类似的信息,这就是我想复制错误设置的原因.

如何在不将样式放在单独的类中然后在两种.error样式中扩展/使用它或使用mixin用于相同目的的情况下如何使用@extend指令？我只想重用相同的样式定义.

问题是,当我这样做时,它结合了各种类继承@extend.

#otherid {
    ...
    .notification {
        ...
        &.error {
            // should use the other ".error" style
        }
    }
}

问题是编译结果具有这种样式定义,它是合并选择器的混合和匹配:

#someid .message.error,
#someid #otherid .message.notification.error,
#otherid #someid .message.notification.error

虽然我宁愿只有这两个:

#someid .message.error,
#otherid .notification.error

这可以完成吗？

Answer 1

你能用@mixin吗？

// Define here
@mixin generic-error {
  // Error styling
}

// Replace original
.notification {
  &.error {
    @include generic-error;
  }
}