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

Question

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

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

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

现在我有一个不同的元素以正常的错误方式显示相似的信息，这就是为什么我想复制错误设置。

如何使用@extend 指令，而不是将样式放在单独的类中，然后在两种 .error 样式中扩展/使用它，或者使用 mixin 达到相同目的？我只想重用相同的样式定义。

问题是，当我执行@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;
  }
}