SCSS插值错误,尝试连接一个循环中的variables后的百分比符号

所以这个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 (eg 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),但是我的节点版本不同(4.2 .1在OSX和4.4.4在Ubuntu)。

我应该以不同的方式输出这些variables,或者我应该尝试将nodejs降级到4.2.1?

所以我不知道为什么我会在我的Ubuntu机器上得到这个错误,而不是我的OSX机器,也许是它的节点版本。 但是我可以通过改变#{$ distance}的插值来修正它,使之成为#{$ distance +'%'}