Gulp 吞咽sass到css：组合具有相同属性/值的选择器

我试图找到任何可以组合具有相同属性/值的css规则的Gulp模块。下面的示例演示了我的问题

h2 {
  font-size: 14px;
}
p {
   font-size: 14px;
}

输出应该是

h2, p {
  font-size: 14px;
}

如果在将SCS编译为css时有办法解决这个问题，那就太好了。提前感谢

您可以使用。例如，根据您要求的输出，这将编译

index.scss

到

build/index.css

：

const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCss = require('gulp-clean-css');

gulp.task('default', function () {
    return gulp.src('index.scss')
        .pipe(sass())
        .pipe(cleanCss({ level: 2 }))
        .pipe(gulp.dest('build'));
});

gulp clean css使用，其中合并这样的选择器被视为“2级优化”，这就是为什么我将级别设置为上面的选项。您可以查看更多详细信息

---

更新 针对以下评论，您可以使用更积极的合并：

gulp.task('default', function () {
    return gulp.src('index.scss')
        .pipe(sass())
        .pipe(cleanCss({ level: { 2: { restructureRules: true } } }))
        .pipe(gulp.dest('build'));
});

之前（

index.scss

）：

之后（

index.css

）：

---

谢谢@MadScone它对我正常工作。但我使用Sass循环将计算出的网格宽度打印到不同的列中，这种方法不会合并具有相同宽度的列。此外，我还尝试使用“级别2”优化来缩小.css文件，但令人惊讶的是，这并不奏效。有什么想法吗？你可以使用

cleancss

选项来获得你想要的。请看我的编辑上面。顺便说一句，我不知道你为什么要这么做。像这样重组CSS可能有点危险，因为在重新安排事物的定义顺序时，您可能会意外地改变事物。非常感谢您，先生。你救了我一天。我昨天就想弄明白<代码>级别：{2:{structureRules:true，mergeSemanticly:true}非常适合我。

@for $i from 1 through 3 {
    .grid-#{$i} {
        width: 30px;
        background-color: blue;
        font-size: 30px;
        height: $i * 10px;
    }
}

.grid-1,.grid-2,.grid-3{width:30px;background-color:#00f;font-size:30px}
.grid-1{height:10px}
.grid-2{height:20px}
.grid-3{height:30px}