SASS 输出分组选择器答案

【问题标题】：SASS output grouping selectorsSASS 输出分组选择器
【发布时间】：2014-12-19 23:36:50
【问题描述】：

SCSS

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

CSS 输出：

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

如何删除此分组选择器。由 gulp 编译。使用此任务：

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()) });

【问题讨论】：

你想要的输出到底是什么？您可以控制 .scss 文件吗？

标签： css sass gulp

【解决方案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;
}

【讨论】：