sass - SCSS, Compass and GULP: How to minify without breaking CSS? -
i using gulp-compass , want minify css.
when this, following code
.tags-bar .sub-bullet:nth-last-of-type { display:none; } .ux-panel-hidden{ display:none; }
becomes minified to:
.tags-bar .sub-bullet:nth-last-of-type,.ux-panel-hidden{display:none}
the :nth-type
part confuses browser, ux-panel-hidden
doesn't read.
tags-bar
, ux-panel
in separate _scss files, not sure why minfication brings them together.
how can fix it?
here gulp code:
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" })); });
:nth-last-of-type
not valid syntax since requires argument passed eg. :nth-last-of-type(odd)
this may causing issue.
more reading on property @ css-tricks https://css-tricks.com/almanac/selectors/n/nth-last-of-type/
Comments
Post a Comment