我如何在我的 scss 中引用嵌套类答案

【问题标题】：How i can referecne nested classes inside my scss我如何在我的 scss 中引用嵌套类
【发布时间】：2022-01-05 20:07:16
【问题描述】：

我有以下 .scss 文件：=

.singleNews {
  text-decoration: none;
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $regular-font-weight;

  &__image {
    padding: 5em;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &.featured {
      height: 75%;
    }
  }
}

那么我该如何定义特色呢？我尝试了以下但都失败了：-

import styles from './SingleNews.module.scss';
//code goes here...
<div className={styles.singleNews__image__featured} style={{ backgroundImage: `url(${post.image})` }}/> 
<div className={styles.singleNews__image featured} style={{ backgroundImage: `url(${post.image})` }}/> 
<div className={styles.singleNews__image.featured} style={{ backgroundImage: `url(${post.image})` }}/>

【问题讨论】：

标签： css typescript sass

【解决方案1】：

&.featured 选择类为featured 的父选择器，这意味着该div 需要有singleNews__image 和featured 类

.singleNews__image.featured {
  background-color: blue;
  width: 100px;
  height: 100px;
}

/* Same selector with Sass */
/*
.singleNews {
  &__image {
    &.featured {
      background-color: blue;
      width: 100px;
      height: 100px;
    }
  }
}
*/

<div class="singleNews__image featured">
</div>

【讨论】：