如何使用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