老哥们，问一个 SCSS 的问题

我有个组件的 html 定义如下：

<!-- 默认卡片 --> <div class="card"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> <!-- 警告卡片样式 --> <div class="card card--warning"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> <!-- 成功卡片样式 --> <div class="card card--successful"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> 

关于 SCSS 我的想法是：

// 这里定义了普通卡片样的样式 .card { &__title { color: gray; } &__content { color: lightgray; } // 定义警告卡片的样式 &--warning { &__title { color: yellow; } &__content { color: lightyello; } } // 定义成功卡片的样式 &--successful { &__title { color: green; } &__content { color: lightgreen; } } } 

但是警告卡片和成功卡片的 css 会被解析为：

.card--warning__title {} .card--warning__content {} .card--successful__title {} .card--successful__content {} 

也就是我实际使用的时候如果要使用警告卡片，实际上 html 应该写成：

<div class="card card--warning"> <div class="card--warning__title"><!-- 而不是 <div class="card__title"> --> <slot name="title"/> </div> <div class="card-warning__content"><!-- 而不是 <div class="card__content"> --> <slot name="content"/> </div> </div> 

请问各位老哥，SCSS 应该怎么来定义样式啊？