Question

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

不工作：

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

Answer 1

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

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

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

<强> E.g

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

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

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

Answer 2

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

在布尔代数中， de Morgan定理指出A || B与!(A && B)相同。对于您而言，这意味着以移动优先的方式考虑问题：

.elem {
  width: 200px;

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

Answer 3

CSS没有办法说“当媒体查询或给定的类适用时”。

使用纯CSS，您只能：

.active {
    width: 200px;
}

@media(max-width: 500px) {
      * {
          width: 200px;
      }
}

使用SASS你可以使用mixin，但对于像这样的单一规则来说效率并不高：

@mixin my-width {
    width: 200px;
}

.active {
    @include my-width;
}

@media(max-width: 500px) {
      * {
          @include my-width;
      }
}

Answer 4

试试这个。

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

Answer 5

你必须宣布媒体和你的班级分开：

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

CSS / SCSS媒体查询或类

5 个答案: