CSS/SCSS媒体查询或类

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

不工作：

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

试试这个

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

---

您必须将媒体和类分开声明：

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

---

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;
      }
}

---

在css中，当同一规则适用于多个选择器时，使用

，

进行分组

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

，

将不起作用

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

例如

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

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

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

---

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

在布尔代数中，de Morgan定理指出

A | | B

与

相同！（A和B）

。在您的情况下，这意味着以移动第一的方式思考您的问题：

.elem {
  width: 200px;

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

---

你能解释一下什么是“唯一的屏幕”吗？：）问题是这样的or@Nelson谭，谢谢，但这不适合我的工作。我需要或询问。现在只在have.active类时添加宽度。@jogoe检查这个链接，问题说是和，问题说是和，我想说的是。谢谢