Gulp sass 到 css：组合选择器与相同的 property/values

Question

我正在尝试寻找可以组合具有相同 property/value 的 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, where merging the selectors like this is considered a "level 2 optimisation", which is why I set the level as an option above. You can look at 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}

Gulp sass 到 css：组合选择器与相同的 property/values

Gulp sass to css: combine selectors with same property/values

gulp

gulp-sass

gulp-clean-css

npm-scripts

更新