老哥们，问一个 SCSS 的问题

[17681880207]

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

[Perry]

这种问题直接问 LLM 就能有答案

[P233]

& 在 scss 里是 parent reference 的意思，全部平级就好了

[nxgh]

可以把 .card 作为一个类名变量 `$card: 'card';`，内层使用 `.#{card}__title`

https://sass-lang.com/playground/#eJwzNFRJTixKsVJQB1Hq1lxcesrVIGatQjWXgoJafHxJZklOKpijoJCcn5NfZKWQXpRYaQ0UqAViiKLk/LyS1LwSVGU5mekZJWhq9fUVnq6b9WRn54u1y55O7Hrau/B5Z/vzWS3PFmx/uqcfZJiubnliUV5mXjrUMJh7dHWRXQK3pDI1Jye/3BosCLUDoQfdYahOA2tF6ER34bOOCU+75mN1YXFpcnJqcXFaaQ6aI1GDCynAUlPzyHIjms5arlouLgB11Y+M

[zhuoyan]

// 这里定义了普通卡片样的样式
.card {
&__title {
color: gray;
}

&__content {
color: lightgray;
}

// 定义警告卡片的样式
&--warning {
.card {
&__title {
color: yellow;
}

&__content {
color: lightyello;
}
}
}

// 定义成功卡片的样式
&--successful {
.card {
&__title {
color: green;
}

&__content {
color: lightgreen;
}
}
}
}

[dallaslu]

& 是指 parent ，根据层级来的。你需要的是固定前缀