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.

jsfiddle minified code

jsfildde non-minified code

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

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -