我有个组件的 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 应该怎么来定义样式啊？