在 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;
  }
}

Answer 2

    %some-css {
      //CSS goes here.
    }

    .another-class {
      @extend %some-css;
    }