与CSS的杂物:将选择器与相同属性/值相结合

Question

我正在尝试找到任何可以结合具有相同属性/值的CSS规则的墨西哥湾模块。以下示例证明了我的问题。

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级优化"，这就是为什么我将级别设置为上述选项的原因。您可以查看这些选项以获取更多详细信息。

---

更新

回答下面的评论，您可以使用更具侵略性的合并：

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}