CSS/SCSS 媒体查询或类答案

【问题标题】：CSS/SCSS media query or classCSS/SCSS 媒体查询或类
【发布时间】：2017-03-13 08:11:21
【问题描述】：

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

不工作：

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

【问题讨论】：

标签： css sass

【解决方案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;
    }
}

【讨论】：

那是和，问题是或

【解决方案2】：

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

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

.elem {
  width: 200px;

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

【讨论】：

这就是我的想法。谢谢。

【解决方案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;
      }
}

【讨论】：

【解决方案4】：

试试这个。

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

【讨论】：

您能解释一下“仅屏幕”的作用吗？ :)
那是和，问题是或
@Nelson Tan，谢谢，但这不适用于我。我需要 OR 查询。现在只有在有 .active 类时才添加宽度。
@jogoe 检查此链接stackoverflow.com/questions/8549529/…

【解决方案5】：

你必须声明媒体和你的班级分开：

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

【讨论】：

那是和，问题是或