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

Answer 1

:nth-last-of-type語法無效，因為它需要傳遞一個參數，例如。 :nth-last-of-type(odd)

這可能是造成您的問題的原因。

有關該屬性的更多信息，請參見CSS-Tricks https://css-tricks.com/almanac/selectors/n/nth-last-of-type/