已关闭。此问题为opinion-based。目前不接受回答。
**要改进此问题吗？**更新此问题，以便editing this post可以使用事实和引文来回答。

26天前关闭
此帖子于26天前编辑并提交审核，未能重新打开帖子：
原始关闭原因未解决
Improve this question的
我得到了一个消息组件，此时只有两个变量（错误，成功）。
该项目使用vue3脚本设置和scss的风格。

<script setup lang="ts">
defineOptions({
  name: 'NotificationMessage',
})

withDefaults(defineProps<{ variant?: string }>(), { variant: 'success' })
</script>

<template>
  <div :class="`notifications-message notifications-message--${variant}`">
    <div class="tw-flex tw-flex-row tw-items-center tw-gap-4">
      <span class="notifications-message__icon material-symbols-outlined"> check_circle </span>
      <div>message</div>
    </div>
    <span class="tw-red-primary tw-text-xl material-symbols-outlined"> close </span>
    <div class="notifications-message__loader" />
  </div>
</template>

<style lang="scss" scoped>
@keyframes widthIncrease {
  100% {
    width: 100%;
  }
}
.notifications-message {
  @apply tw-w-64 tw-pt-2 tw-pb-3 tw-px-4 tw-flex tw-flex-row tw-justify-between tw-items-center;
  color: #6a5d6a;
  word-wrap: break-word;
  display: flex;
  border-radius: 4px;
  max-width: 100%;
  box-shadow: 0 0 3px 1px $blue-secondary;
  background-color: $white-primary;

  &--success {
    .notifications-message {
      &__icon {
        color: $green-primary;
      }

      &__loader {
        background-color: $green-primary;
      }
    }
  }

  &--error {
    .notifications-message {
      &__icon {
        color: $red-primary;
      }

      &__loader {
        background-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;
  }
}
</style>

字符串
是否有可能直接基于父类变量进行赋值。
我知道选择器：has（）存在，当我们想做一些事情，只有当父包含的东西。
那么，我们是否可以在孩子身上做同样的事情，以避免重复？
大概是这样的：

.notifications-message {
// ....
 &__icon {
    
    // If notifications-message contains class --success {
      color: $green-primary;
    }

    // If notifications-message contains class --error {
      color: $red-primary;
    }
 }
}

型