分组 .className + 媒体查询？答案

【问题标题】：Grouped .className + media query?分组 .className + 媒体查询？
【发布时间】：2017-12-13 20:57:39
【问题描述】：

由于效果会拆分页面并允许调整其中一个容器的大小。我必须为响应式添加更多样式，所以我在这个可调整大小的容器中添加了一个代表我当前断点的类 (xs,sm,md,lg)

这样

if ( ui.position.left <= 480 ) { /* It represent it's width, I am using this as the drag function of draggable */
                clase = 'xs';
            } else if ( ui.position.left <= 768 ) {
                clase = 'sm';
            } else if ( ui.position.left <= 992 ) {
                clase = 'md';
            } else {
                clase = 'lg';
            }
       $('.element').removeClass('xs sm md lg').addClass(clase);

例如：

@media (max-width: 320px)
  h2 {
    font-size:12px;
  }
}

我现在必须补充：

   .xs h2 {
     font-size:12px
   }

有没有办法不必复制样式？（我有几个街区）

这样的事情我不会工作

.xs, @media (max-width:320px) {
   h2 {
     font-size: 12px
   }
}

【问题讨论】：

不，这是不可能的。
我想.. 还需要问，用 javascript 吗？
如果您关心简化 CSS 文件，请使用 LESS 或 SCSS。使用 JavaScript 是个坏主意。
不确定 JS 会给你什么。即使使用 JS，您仍然会编写 CSS。这就是像 SASS/LESS 这样的预处理器可以提供帮助的地方。
我标记了问题#compass，所以我使用的是scss..

标签： css css-selectors media-queries

【解决方案1】：

您可以使用 postcss 和插件 https://github.com/hail2u/node-css-mqpacker。这很容易并且工作正常。您可以将 postcss 与 SCSS 一起使用。

【讨论】：

虽然理论上可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效
@Paulie_D okey，对不起。

【解决方案2】：

使用媒体查询时，您通常有一个全局默认值，然后如果某个谓词为真（例如窗口小于 320 像素），则覆盖查询中的默认值。

在您的示例中，您希望在媒体查询中使用与全局默认值和覆盖值相同的值。恕我直言，这毫无意义。

【讨论】：