Gulp kompiliert zu css mit schlechten Präfixen?

Question

Wenn ich meine CSS zu CSS kompilieren, ist die CSS-Datei in Ordnung, aber etwas stimmt nicht mit einigen CSS-Elementen. Schluck oder etwas fügt einige Nicht-Gehirn-Präfixe hinzu.

(Auch wenn ich den Pfeil-up von Hand schreiben, ist das Problem noch hier)

(Ich habe nur ein Plugin in schluck = BroserSync. Ich habe versucht, es ohne das Plugin zu kompilieren und es ist immer noch die gleiche)

Ein Beispiel hier:

Sass Code:

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

Mixin Pfeil-up:

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

Zusammengestellt 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']); 

Answer 1

Sieht aus wie Sie ein unerwartetes Verhalten aufgrund fehlen einige Semikolons bekommen.

Vielleicht sollte

=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;