如何创建一个输出集中css规则的较少的mixin？

在使用时，我试图最小化代码输出

目前，我使用

@rules（）

方法为不同元素设置媒体查询的代码如下：

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

.logo {
    width: 100px;

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

这很好，但是当我使用它超过两次时，我会得到大量的

@media

行输出

我想知道的是，是否有一种方法可以通过一些我找不到的被忽略的特性来最小化上述问题

---

i、 例如，可能会有一些东西将所有的

@规则

放入

.screen xs

中，并将它们放入一个

@media

声明中？

如上面的评论所述，可以通过mixin强制整合

@media

包装的样式，例如。（只是其中一个可能的变体，但与当前代码相比，所有这些变体将更加冗长且可读性较差）：

.logo{
宽度：100px；
}
.screen-xs（）{
.logo{宽度：50px；}
}
.介绍{
宽度：200px；
}
.screen-xs（）{
.intro{宽度：100px；}
}
#页脚>div{
宽度：25%；
}
.screen-md（）{
#页脚>div{width:10%；}
}
// ........................................
@仅介质屏幕和（最小宽度：222px）{
.screen-xs（）；
}
@仅介质屏幕和（最小宽度：555px）{
.screen-md（）；
}
//等等。

有关自动合并，请参见

另请参阅其他（更广泛的）方法。

直接回答：目前，没有通过less实现这一点的选项。 替代解决方案 使用a组合所有

@媒体

规则

您可以使用和分组所有

@媒体

规则：

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']);

输入（联合收割机前） 输出（联合收割机后）

---

您还可以使用。

LESS没有@media merging（尚未）。我使用了mixin来实现这一点，但这有点像hack-y。基本上，由于在LESS mixin中混合将调用该mixin的每个实例，您可以定义尽可能多的

.screen xs（）{}

es随你所愿。如果你对演示感兴趣，我可以与你分享。@calvin，当然，演示会非常感谢：）哈哈，看来@seven Phase max比我强多了。他的演示非常完美。希望能有帮助。谢谢你！我对上述方法有一个问题，即它不允许嵌套。如果

.screen-md（）。
@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; }