如何创建输出集中式css规则的less mixin？

Question

我在尝试使用lessjs时最小化代码输出。

目前，我有使用@rules()方法为不同元素设置媒体查询的代码，如下所示：

.screen-xs ( @rules ){
    @media only screen and (min-width: @screen-xs){
        @rules();
    }
}

.logo {
    width: 100px;

    .screen-xs({ width: 50px; });
}

这样可以正常工作，但是当我使用它的时间超过几次时，我会获得@media行的大量输出。

我想知道的是，如果有一种方法可以最大限度地减少上述内容而忽略了一些我找不到的功能？

即。也许会把@rules投入.screen-xs并将它们放入一个@media声明的内容？

Answer 1

如上面的评论所述，可以通过mixins强制合并@media包裹的样式，例如（只是其中一种可能的变体，但与当前代码相比，所有变体都会更冗长，更不易读取）：

.logo {
    width: 100px;
}

.screen-xs() {
    .logo {width: 50px;}
}

.intro {
    width: 200px;
}

.screen-xs() {
    .intro {width: 100px;}
}

#footer > div {
    width: 25%;
}

.screen-md() {
    #footer > div {width: 10%;}
}

// ........................................

@media only screen and (min-width: 222px) {
    .screen-xs();
}

@media only screen and (min-width: 555px) {
    .screen-md();
}

// etc.

关于自动合并，请参阅https://github.com/less/less.js/issues/950。

P.S。另请参阅LESS CSS retina media queries without redundancy了解其他（更多扩展）方法。

Answer 2

直接回答：目前，没有选择通过less来做到这一点。

替代解决方案

使用postprocessor结合所有@media规则。

您可以使用Gulp和gulp-cmq对所有@media规则进行分组：

var gulp = require('gulp'),
    less = require('gulp-less'),
    cmq = require('gulp-combine-media-queries');

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  gulp.src(['./less/make.less'])
    .pipe(less())
    .pipe(cmq())
    .pipe(gulp.dest('./css'))
});

// default gulp task
gulp.task('default', ['styles']);

INPUT（合并前）

@media (min-width: 768px)
  .logo { width: 100px; }

/* Several lines down ... */

@media (min-width: 768px)
  .header { color: blue; }

输出（合并后）

@media (min-width: 768px)
  .logo { width: 100px; }
  .header { color: blue; }

您还可以使用Grunt将grunt-cmq用于{{3}}。