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

原文 标签 css sass css-selectors scss-mixins

我有一个常用的组件,它的 scss 是这样的:

.component {
    margin-right: 12px;

    &.specified-use-case {
        margin-right: 30px;

        &:nth-child(odd) {
            margin-right: 70px
        }
    }
}

现在我希望移动 View 中的所有内容都具有相同的样式
.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
        }
    }
}

但这不能改变移动 View 中“指定用例”的样式。为了做到这一点,我必须
.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;
            }
        }
    }
}

这对我来说似乎不正确。有没有更好的方法来定义一次移动 View css?

最佳答案

根据 CSS' specificity rules (尝试 this calculator )不幸的是,您需要重复一遍。您的 SCSS 解释器所做的只是将您编写的内容编译为标准 CSS,看起来类似于:

.component {
 margin-right:12px
}
@media (max-width:768px) {
 .component {
  margin-right:0px;
  margin-bottom:14px
 }
}
.component.specified-use-case {
 margin-right:30px
}
@media (max-width:768px) {
 .component.specified-use-case {
  margin-right:0px;
  margin-bottom:14px
 }
}
.component.specified-use-case:nth-child(odd) {
 margin-right:70px
}
@media (max-width:768px) {
 .component.specified-use-case:nth-child(odd) {
  margin-right:0px;
  margin-bottom:14px
 }
}

如您所见,您使用 @media 覆盖了每个类。规则集在声明之后。而且因为我是永远不使用 !important 的大力支持者(因为你会打开一个潘多拉盒子),你可以缩短你的 SCSS 的唯一方法是:
.component {
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) {
        margin-right: 0px;
        margin-bottom: 14px;  // only need to define margin-bottom once, here.
    }

    &.specified-use-case {
        margin-right: 30px;

        @include viewport(mobile) {
            margin-right: 0px;
            //margin-bottom: 14px;, remove this
        }

        &:nth-child(odd) {
            margin-right: 70px

            @include viewport(mobile) {
                margin-right: 0px;
                //margin-bottom: 14px;, remove this
            }
        }
    }
}

希望这可以帮助!

关于css - 如何在 SCSS 中使用 Mixin 覆盖引用父选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51622743/

相关文章:

php - 如何在php中使用html div标签

css - H2标签中的跨度。自动调整宽度

html - 是否可以在 css3 中完美地复制它?

html - HTML文本的边框底线下划线

css - 定宽CSS float 2列布局等高问题

javascript - 使用CSS或JavaScript从原色动态获取强调色

html - CSS Dropdown干扰Flexbox

html - 如何使用after和before属性选择div的所有外侧

javascript - 无法获取元数据选择器文本

html - 第一个 child 的CSS不工作