如何使用SCSS选择父级

我想在 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;
}

我怎样才能做到这一点?

回答

在类之后使用父选择器 &,如下所示:

.username {
  color: red;

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

这是一个演示

注意:不需要重复color: red


以上是如何使用SCSS选择父级的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>