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

Question

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

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

输出应该是

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

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

Answer 1

您可以使用gulp-clean-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 使用clean-css，像这样合并选择器被认为是“2 级优化”，这就是为什么我将级别设置为上面的选项。您可以查看those options了解更多详情。

---

更新

针对下面的评论，您可以使用更激进的合并：

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

之前 (index.scss)：

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

之后 (index.css)：

.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}