使用紧凑的 gulp-sass 扭曲背景图像答案

【问题标题】：gulp-sass warping background-images with compact使用紧凑的 gulp-sass 扭曲背景图像
【发布时间】：2020-09-23 13:15:19
【问题描述】：

我正在使用 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 选项，但它不相关。

有人可以帮忙吗？

【问题讨论】：

标签： css gulp gulp-sass

【解决方案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;
}

然后我在导入 compass-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;
}

【讨论】：