css - SCSS、コンパス、GULP: CSS を壊さずに縮小する方法は?

Question

Gulp -Compassを使用し ていて、CSS を縮小したいと考えています。

これを行うと、次のコード

.tags-bar .sub-bullet:nth-last-of-type {
display:none; 
}

.ux-panel-hidden{
display:none;
}

次のように縮小されます。

.tags-bar .sub-bullet:nth-last-of-type,.ux-panel-hidden{display:none}

この:nth-type部分はブラウザを混乱させるため、ux-panel-hidden読み取れません。

コードが縮小された JSFiddle

縮小されていないコードを含む JSfildde

tags-barとux-panel_scss ファイルが別々になっているため、縮小によってそれらがまとめられる理由がわかりません。

どうすれば修正できますか？

これが私のGulpコードです：

gulp.task('compass', function() {
    return gulp.src('frontend/build/css/*.scss')
        .pipe(compass({
            css: 'frontend/dist/css',
            sass: 'frontend/build/css',
            image: 'frontend/images/',
            font: 'stylesheets/fonts',
            require: ['susy', 'breakpoint'],
            bundle_exec: true
        }))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('frontend/dist/css'))
        .pipe(rename({
         suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('frontend/dist/css'))
        .pipe(notify({ // Add gulpif here
            sound: "Pop"
        }));
});