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

Question

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

Answer 1

您可以将规则放入媒体查询中：

@include viewport(mobile) {
    margin-right: 0px;
    margin-bottom: 14px;

    &.specified-use-case {
        margin-right: 0px;
        margin-bottom: 14px;
    }
}

Answer 2

似乎 sass 是错误的，因为您在断点上方指定了边距，试试这个：

.component {
    margin-right: 12px;

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

    &:nth-child(odd) {
        margin-right: 70px
    }
  }
 // some predefined mixin
@include viewport(mobile) {
    margin-right: 0px;
    margin-bottom: 14px;
}
}

Answer 3

根据 CSS' specificity rules (try 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
 }
}

如您所见，您在每个 class 声明后立即用 @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
            }
        }
    }
}

希望对您有所帮助！

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

How to overwrite Referencing Parent Selector using Mixin in SCSS

css

sass

css-selectors

scss-mixins