• 主页
  • 如何在SCSS中使用Mixin覆盖引用父选择器

如何在SCSS中使用Mixin覆盖引用父选择器

Posted by admin

我有一个常用组件，它的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
        }
    }
}

但这不能改变移动视图中"specified-use-case“的样式。为了做到这一点，我必须

.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？

转载请注明出处:http://www.jubohx.com/article/20230510/2220530.html