CSS/SCSS媒体查询或类

Question

我需要与媒体查询和类运行相同的样式.例如,当屏幕小于500px或者具有类.active时,我需要设置200px.这怎么做聪明的方式？没有复制/粘贴代码？

不工作:

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

Answer 1

在css中,,当相同的规则适用于多个选择器时,它用于分组.

但是,媒体查询不是选择器.它们由媒体类型和零个或多个表达式组成,用于检查特定媒体功能的状况.因此,,在这种情况下不会起作用.

如果你想让它保持干燥,你可以试试它们的mixin功能.

例如

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

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

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

Answer 2

Mixins是一个简单的解决方案，但是它们在最终输出中复制了CSS。更好的解决方案可能是完全颠倒逻辑。

在布尔代数中，德摩根定理指出A || B与相同!(A && B)。在您的情况下，这意味着以移动优先的方式考虑问题：

.elem {
  width: 200px;

  @media (min-width: 501px) {
    &:not(.active) {
      width: auto; // or whatever
    }
  }
}

Answer 3

试试这个。

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