Stylus中相同媒体查询规则的分组实现方法咨询

嘿，这个需求太常见了！预处理器就是用来解决这类重复代码问题的，下面给你分几种主流工具讲具体实现方式：

Sass/SCSS 实现 #

Sass 里用 @mixin 配合 @content 指令就能轻松搞定，还能复用不同的断点：

// 定义一个断点混合宏
@mixin breakpoint($max-width) {
  @media only screen and (max-width: $max-width) {
    @content; // 这里会插入你传入的样式内容
  }
}

// 调用混合宏，把所有同断点的样式写在一起
@include breakpoint(600px) {
  body { background-color: #f00; }
  .div1 { background-color: #0c0; }
  .div2 { background-color: #00c; }
}

编译后就会自动生成你想要的单媒体查询包裹的样式，完全不用重复写@media。

Less 实现 #

Less 的思路和 Sass 几乎一致，用混合宏（mixin）+ @content：

// 定义断点混合宏
.breakpoint(@max-width) {
  @media only screen and (max-width: @max-width) {
    @content;
  }
}

// 调用混合宏
.breakpoint(600px) {
  body { background-color: #f00; }
  .div1 { background-color: #0c0; }
  .div2 { background-color: #00c; }
}

PostCSS 实现 #

如果你用 PostCSS（比如在 Vue、React 项目里常用），可以用专门的插件自动合并相同的媒体查询：

1. 安装插件：

npm install postcss-combine-media-query --save-dev

2. 在 postcss.config.js 里配置：

module.exports = {
  plugins: [
    require('postcss-combine-media-query')
  ]
};

这样哪怕你写了多个相同的@media规则，编译后插件会自动把它们合并成一个，完全不用手动调整写法。

小提示 #

原生 CSS 目前还不支持自动合并媒体查询，必须借助预处理器或 PostCSS 这类工具来实现哦。

内容的提问来源于stack exchange，提问作者Abiel Muren