SASS output grouping selectors

Question

SCSS

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

CSS Output:

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

How can I remove this grouping selectors. Compilied by gulp. Using this task:

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

You are seeing the intended output of the @extend feature. It combines extended selectors in order to result in a smaller file output. You could try using a mixin instead.

SCSS:

@mixin clearfix {
  background: #000;
}

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

CSS output:

.clearfix {
  background: #000;
}

.container1 {
  background: #000;
}

.container2 {
  background: #000;
}

.container3 {
  background: #000;
}