Question

我正在使用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, false, false, false, false, false, false, false));
  background-image: -webkit(compact(linear-gradient(#f2f2f2, #e1e1e1), false, false, false, false, false, false, false, false, false));
  background-image: -moz(compact(linear-gradient(#f2f2f2, #e1e1e1), false, false, false, false, false, false, false, false, false));
  background-image: -o(compact(linear-gradient(#f2f2f2, #e1e1e1), false, false, false, false, false, false, false, false, false));
  background-image: compact(linear-gradient(#f2f2f2, #e1e1e1), false, false, false, false, false, false, false, false, false);

我想了解它的来源以及如何删除它，因为Chrome给我以下错误：无效的属性值。

我知道我需要删除它，因为当我使用chrome的检查工具并删除“紧凑”时，就会显示正确的颜色。

我试图在网上搜索，但没有任何帮助。我尝试使用gulp-compass，但在Ruby中遇到错误，我尝试了gulp-for-compass，但这无法正常工作。我尝试使用outputStyle选项，但没有关系。

有人可以协助吗？

Answer 1

我在这里找到了答案： 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, false false false;
  -webkit-transition-delay: 0s, 1s, 0s, 0s, 0s;
  -moz-transition: stroke 1s ease-out false, stroke-width 1s cubic-bezier(0.405, 1.57, 0.45, 1.35) 1s, false false false false, false false false false, false false false false;
  -o-transition: stroke 1s ease-out false, stroke-width 1s cubic-bezier(0.405, 1.57, 0.45, 1.35) 1s, false false false false, false false false false, false false false false;
  transition: stroke 1s ease-out, stroke-width 1s cubic-bezier(0.405, 1.57, 0.45, 1.35) 1s, false, false, false;
}

紧凑的gulp-sass扭曲背景图像

1 个答案: