Question

使用预处理器处理媒体查询非常酷，但我没有找到一种方法来对相同的规则进行分组，以避免重复的媒体查询规则，如：

示例1

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
}
@media only screen and (max-width: 600px) {
  .div1 {
    background-color: #0c0;
  }
}
@media only screen and (max-width: 600px) {
  .div2 {
    background-color: #00c;
  }
}

我想将相同的规则分组为一个，如：

示例2

@media only screen and (max-width: 600px) {
  body {
    background-color: #f00;
  }
  .div1 {
    background-color: #0c0;
  }
  .div2 {
    background-color: #00c;
  }
}

我的STYLUS代码

这就是我在Stylus中处理媒体查询的方式：

media_queries = {
  mobile  : "only screen and (max-width: 600px)",
  tablet  : "only screen and (min-width: 601px) and (max-width: 800px)",
  desktop : "only screen and (min-width: 801px)"
}

我可以调用媒体尺寸：

for_breakpoint(breakpoints)
  conditions = ()
  for breakpoint in breakpoints
    push(conditions, media_queries[breakpoint])
  conditions = join(", ", conditions)
  @media conditions
    {block}

之后，我在我想要具有特定媒体查询的规则中调用它：

+for_breakpoint(mobile)
  .div1
    background-color red

但问题是我结束了大量重复媒体查询，例如示例1 上的查询。有没有办法像示例2 一样对它们进行分组？

Answer 1

使用插件groupCssMediaQueries：

gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(groupCssMediaQueries())
        .pipe(gulp.dest('./public/css/'))
});

在Stylus中对媒体查询进行分组

1 个答案: