我对 scss 上的 @extend 有一个奇怪的问题。当我扩展一些具有重复属性的 %placeholder 时,gulp-clean-css 会合并它们,我不希望这种情况发生。
这是一个例子: foo.scss
%one {
font-size: 16px;
width: 95%;
}
%two {
font-size: 1rem;
width: calc(100% - 10px);
}
.foo {
@extend %one;
@extend %two;
}
.foo2 {
font-size: 16px;
font-size: 1rem;
}
foo.min.css
.foo{font-size:1rem;width:calc(100% - 10px);}
.foo2{font-size:16px;font-size:1rem}
为什么会这样?
如果有帮助,这是我的 gulp 任务:
gulp.task('scss', function(){
console.log('start task scss');
gulp.src(folderStyles)
.pipe(sass.sync().on('error', sass.logError))
.pipe(rename({ suffix: '.min' }))
.pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true}))
.pipe(gulp.dest(folderStyles));
logEnv();
});
有没有其他更好的插件可以使用?我不希望它删除重复的属性。如果你问我为什么,那是因为旧浏览器支持而不是可能不支持rem
or calc
,或其他“新奇属性”;)
谢谢 :)