如何创建一个输出集中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行输出。

我想知道的是，是否有一种方法可以最小化上面的一些我找不到的被忽视的功能?

。也许有些东西会把我扔进.screen-xs的所有@rules都放在一个@media声明中?

Answer 1

直接回答:目前，没有选项可以通过less来实现。

替代解决方案

使用后处理程序组合所有@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 (before combine)

@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; }

Answer 2

如上所述，可以通过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。

注:另一种(更扩展的)方法请参见LESS CSS retina media queries without redundancy。