我有一个常用的组件,它的 scss 是这样的:
.component {
margin-right: 12px;
&.specified-use-case {
margin-right: 30px;
&:nth-child(odd) {
margin-right: 70px
}
}
}
现在我希望所有东西在移动视图中都有相同的风格
.component {
margin-right: 12px;
// some predefined mixin
@include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
&.specified-use-case {
margin-right: 30px;
&:nth-child(odd) {
margin-right: 70px
}
}
}
但这不能改变移动视图中“指定用例”的样式。为了做到这一点,我必须
.component {
margin-right: 12px;
// some predefined mixin
@include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
&.specified-use-case {
margin-right: 30px;
@include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
&:nth-child(odd) {
margin-right: 70px
@include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
}
}
}
这对我来说似乎不正确。有没有更好的方法来定义移动视图 css 一次?