Question

所以这个SCSS代码在我的Macbook上工作正常，但不是我的Ubuntu机器：

@each $distance, $color in $range-distances{

    @each $track in $tracks {
        .distance-slider--#{$distance}#{$track}{
            background: #{$color};
            background-image: linear-gradient(to right, #{$color} #{$distance}%, $grey 0);
        }
    }
}

我收到以下错误：

 [Task Failed [scss/_modules/input-range.scss
Error: Invalid CSS after "...} #{$distance}%": expected expression (e.g. 1px, bold), was ", $grey 0);"
        on line 101 of scss/_modules/input-range.scss
>> -gradient(to right, #{$color} #{$distance}%, $grey 0);
   ------------------------------------------^

这项任务没有什么特别之处：

gulp.task('sass', ['clean:styles'], function() {

  return gulp.src(paths.scssPath+'/site.scss')
  .pipe(plumber({ errorHandler: handleErrors }))
  .pipe(sourcemaps.init())
  .pipe(sass({
    includePaths: [
      paths.bowerPath + '/bootstrap-sass/assets/stylesheets',
      paths.bowerPath + '/components-font-awesome/scss',
      paths.scssGlob
    ],
    errLogToConsole: true,
    outputStyle: 'expanded'
  }))
  .pipe(postcss([
    autoprefixer({ browsers: ['last 2 version'] })
  ]))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest( paths.cssCompiled ));
});

我正在使用相同的gulp文件，安装了我的包与相同的package.json文件（所以所有的依赖版本都相同），有相同版本的gulp（3.9.1），但我的节点版本是不同（OSX上为4.2.1，Ubuntu上为4.4.4）。

我应该以不同的方式输出这些变量，还是应该尝试将nodejs降级为4.2.1？

Answer 1

所以我不知道为什么我会在我的Ubuntu机器而不是我的OSX机器上得到那个错误，也许是它的节点版本。但我能够通过将＃{$ distance}的插值更改为＃{$ distance +'％'}

来解决这个问题。

SCSS插值错误，尝试在循环中的变量之后连接百分号

1 个答案: