如何使用 SCSS 选择父级答案

【问题标题】：How to select parent using SCSS如何使用 SCSS 选择父级
【发布时间】：2021-05-14 05:57:09
【问题描述】：

我想在 SCSS 中写这样的东西：

.username {
  color: red;

  @something .mobile {
    font-weight: bold
  }
  
  @something .desktop {
    font-weight: normal
  }
}

...在 CSS 中具有以下输出：

.mobile .username {
  color: red;
  font-weight: bold
}


.desktop .username {
  color: red;
  font-weight: normal;
}

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

在课后使用parent selector&，如下所示：

.username {
  color: red;

  .mobile & {
    font-weight: bold
  }
  
  .desktop & {
    font-weight: normal
  }
}

这是demo

注意：不需要重复color: red

【讨论】：