SCSS、Compass 和 GULP:如何在不破坏 CSS 的情况下缩小?
SCSS, Compass and GULP: How to minify without breaking CSS?
我正在使用 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
不会被读取。
JSfildde with non-minified code
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"
}));
});
:nth-last-of-type
不是有效的语法,因为它需要传递一个参数,例如。 :nth-last-of-type(odd)
这可能是您遇到问题的原因。
更多关于 属性 的阅读 CSS-技巧 https://css-tricks.com/almanac/selectors/n/nth-last-of-type/
我正在使用 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
不会被读取。
JSfildde with non-minified code
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"
}));
});
:nth-last-of-type
不是有效的语法,因为它需要传递一个参数,例如。 :nth-last-of-type(odd)
这可能是您遇到问题的原因。
更多关于 属性 的阅读 CSS-技巧 https://css-tricks.com/almanac/selectors/n/nth-last-of-type/