SASS输出分组选择器

Question

SCSS

.clearfix.scss {
    background: #000;
}
.container1 {
    @extend .clearfix;
}
.container2 {
    @extend .clearfix;
}
.container3 {
    @extend .clearfix;
}

CSS输出：

.clearfix, .container1, .container2, .container3, .container4, .container5 {
    background: #000;
}

如何删除此分组选择器。由吞咽编译而成。使用此任务：

gulp.task('sass', function () {
    return gulp.src('scss/style.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer(
            {
                browsers: ['last 15 versions'],
                cascade: true
            }
            ))
        .pipe(csscomb())
        .pipe(gulp.dest('css/'))
        .pipe(connect.reload()) });

Answer 1

您看到的是@extend特性的预期输出。它将扩展选择器组合在一起，以产生较小的文件输出。您可以尝试使用mixin。

SCSS：

@mixin clearfix {
  background: #000;
}

.clearfix {
  @include clearfix;
}
.container1 {
  @include clearfix;
}
.container2 {
  @include clearfix;
}
.container3 {
  @include clearfix;
}

CSS输出：

.clearfix {
  background: #000;
}

.container1 {
  background: #000;
}

.container2 {
  background: #000;
}

.container3 {
  background: #000;
}