Gulp 正在编译为带有错误前缀的 css？答案

【问题标题】：Gulp is compiling to css with bad prefixes?Gulp 正在编译为带有错误前缀的 css？
【发布时间】：2016-04-28 20:03:27
【问题描述】：

当我将我的 sass 编译为 css 时，css 文件没问题，但是某些 css 元素有问题。 Gulp 或其他东西正在添加一些非大脑前缀。

（即使我手写了箭头，问题仍然在这里）

（我在 gulp = BroserSync 中只有 1 个插件。我尝试在没有插件的情况下编译它，它仍然是一样的）

这里是一个例子：

Sass 代码：

&:before
    position: absolute
    bottom: 100%
    left: 0
    content: ''
    height: 0
    width: 0
    +arrow-up(5px, $green-gray)

混合箭头：

=arrow-up($px, $color)
    border-bottom:  $px solid $color
    border-right:   $px solid transparent
    border-left:    $px solid transparent
    border-top:     $px solid transparent

编译的css：

  .detail-comment-tools li span:before {
    position: absolute;
    bottom: 100%;
    left: 0;
    content: '';
    height: 0;
    width: 0;
    border-bottom: 5px solid #a1b0aa;
      border-bottom-border-right: 5px solid transparent;
      border-bottom-border-left: 5px solid transparent;
      border-bottom-border-top: 5px solid transparent; }

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('styles', function(){
    gulp.src('public/sass/main.sass')
        .pipe(sass())
        .pipe(gulp.dest('public/css'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('serve', function() {

    browserSync.init({
        proxy: "localhost/creandosu/public"
    });

    gulp.watch('public/sass/*.sass', ['styles']);
});


gulp.task('default', ['styles', 'serve']);

【问题讨论】：

请勿发布代码截图。无法将它们复制/粘贴到我们的编辑器中并自己编译。
已编辑，感谢您提供的信息。
无法复制：sassmeister.com/gist/c79300484c92774b910084479f360982
所以问题应该像我预期的那样在 gulp 中的某个地方？
你可以自己运行 Sass 来测试它。此外，您实际上并没有提供重现您的输出的实际代码。

标签： css sass gulp gulp-sass

【解决方案1】：

由于缺少一些分号，您似乎遇到了一些意外行为。

也许

=arrow-up($px, $color)
  border-bottom:  $px solid $color
  border-right:   $px solid transparent
  border-left:    $px solid transparent
  border-top:     $px solid transparent

应该是

=arrow-up($px, $color)
  border-bottom:  $px solid $color;
  border-right:   $px solid transparent;
  border-left:    $px solid transparent;
  border-top:     $px solid transparent;

【讨论】：