CSS/SCSS 媒体查询或类

Question

我需要对媒体查询和类运行相同的样式。 例如，当屏幕小于 500px 或具有 .active 类时，我需要设置 200px。 如何以聪明的方式做到这一点？没有复制/粘贴代码？

不工作:

@media(max-width: 500px), .active {
      width: 200px;
    }

Answer 1

在 css 中，当同一规则应用于多个选择器时，, 用于分组。

然而，media queries不是选择器。它们由媒体类型和零个或多个表达式组成，用于检查 particular media features 的条件。 .因此，, 在这种情况下将不起作用。

如果你想保持干燥，你可以试试他们的 mixin 功能。

例如

@mixin smallWidth() {
    width: 200px;
}

.elem {
    &.active {
        @include smallWidth;
    }

    @media only screen and (max-width : 500px) {
        @include smallWidth;
    }
}