紧凑的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;
}