Question

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

（即使我手动编写箭头，问题仍然存在）

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

这里有一个例子：

Sass代码：

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

Mixin向上箭头：

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

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

Gulp正在使用错误的前缀编译css？

1 个答案: