如何解决紧凑的gulp-sass扭曲背景图像
我正在使用gulp工具和gulp-sass来编译scss文件。 相关的gulp文件代码:
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
function styles() {
return gulp.src('app/styles/main.scss')
.pipe(sass.sync({includePaths: ['app/bower_components','node_modules'],outputStyle: 'expanded'
}).on('error',sass.logError))
.pipe(gulp.dest('.tmp/styles'));
};
此生成带有所有相关CSS的main.css文件,唯一的问题是,对于background-images标签,我得到了这样的信息:
background-image: -owg(compact(linear-gradient(#f2f2f2,#e1e1e1),false,false));
background-image: -webkit(compact(linear-gradient(#f2f2f2,false));
background-image: -moz(compact(linear-gradient(#f2f2f2,false));
background-image: -o(compact(linear-gradient(#f2f2f2,false));
background-image: compact(linear-gradient(#f2f2f2,false);
我想了解它的来源以及如何删除它,因为Chrome给我以下错误:无效的属性值。
我知道我需要删除它,因为当我使用chrome的检查工具并删除“紧凑”时,就会显示正确的颜色。
我试图在网上搜索,但没有任何帮助。 我尝试使用gulp-compass,但在Ruby中遇到错误,我尝试了gulp-for-compass,但这无法正常工作。 我尝试使用outputStyle选项,但没有关系。
有人可以协助吗?
解决方法
我在这里找到了答案: https://stackoverflow.com/a/11752227/14327518
我创建了一个新文件名_functions,然后复制粘贴:
@function compact($var-1,$var-2: false,$var-3: false,$var-4: false,$var-5: false,$var-6: false,$var-7: false,$var-8: false,$var-9: false,$var-10: false) {
$full: $var-1;
$vars: $var-2,$var-3,$var-4,$var-5,$var-6,$var-7,$var-8,$var-9,$var-10;
@each $var in $vars {
@if $var {
$full: $full,$var;
}
}
@return $full;
}
然后在导入指南针-mixins库之前,将该文件导入到main.scss中
结果main.css符合预期,例如:
line {
stroke: #a4a4a4;
stroke-width: 2;
-webkit-transition: stroke 1s ease-out,stroke-width 1s cubic-bezier(0.405,1.57,0.45,1.35),false false false,false false false;
-webkit-transition-delay: 0s,1s,0s,0s;
-moz-transition: stroke 1s ease-out false,1.35) 1s,false false false false,false false false false;
-o-transition: stroke 1s ease-out false,false false false false;
transition: stroke 1s ease-out,false,false;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。