Vue3+SCSS组件变体优化：如何基于父类样式避免代码重复？

解决方案 #

你可以通过在子元素选择器中反向引用父级变体类的方式实现需求，或者利用SCSS的混合宏（Mixin）进一步精简代码，以下是具体实现：

方式一：在子元素选择器内直接关联父级变体类

这种写法完全符合你期望的结构，通过在子元素选择器内部指定父级变体类来设置样式：

.notifications-message {
  // ... 基础样式省略

  &__icon {
    // 当父级包含 --success 类时
    .notifications-message--success & {
      color: $green-primary;
    }
    // 当父级包含 --error 类时
    .notifications-message--error & {
      color: $red-primary;
    }
  }

  &__loader {
    @apply tw-absolute tw-bottom-0 tw-left-0 tw-w-0 tw-h-1 tw-rounded-bl-md tw-rounded-br-md;
    animation: widthIncrease 4s linear forwards;

    .notifications-message--success & {
      background-color: $green-primary;
    }
    .notifications-message--error & {
      background-color: $red-primary;
    }
  }

  // 移除原来冗余的 &--success 和 &--error 块
}

编译后的CSS会生成正确的选择器：

.notifications-message--success .notifications-message__icon { color: ...; }
.notifications-message--error .notifications-message__icon { color: ...; }
.notifications-message--success .notifications-message__loader { background-color: ...; }
.notifications-message--error .notifications-message__loader { background-color: ...; }

方式二：使用SCSS混合宏减少重复代码

如果变体和对应的样式规则较多，推荐用Mixin来统一管理，避免重复书写选择器：

// 定义混合宏，接收变体名称和颜色参数
@mixin variant-style($variant, $color) {
  &--#{$variant} &__icon {
    color: $color;
  }
  &--#{$variant} &__loader {
    background-color: $color;
  }
}

.notifications-message {
  // ... 基础样式省略

  &__loader {
    @apply tw-absolute tw-bottom-0 tw-left-0 tw-w-0 tw-h-1 tw-rounded-bl-md tw-rounded-br-md;
    animation: widthIncrease 4s linear forwards;
  }

  // 调用混合宏传入变体参数
  @include variant-style(success, $green-primary);
  @include variant-style(error, $red-primary);
}

补充说明 #

• 你当前代码中&--success内部嵌套.notifications-message是冗余的，因为&--success本身就是.notifications-message的变体类（即.notifications-message--success），不需要再次选择.notifications-message。
• 原生CSS的:has()选择器也能实现类似逻辑，但目前浏览器支持不如预编译后的SCSS广泛，因此更推荐上述SCSS方案。

内容的提问来源于stack exchange，提问作者Raphael Rlt