0


拥有这个:

样式.scss:

.example {
    background: linear-gradient(to top, #45678a, #ab4563);
}

gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function(){
  return gulp.src('scss/*.scss')
    .pipe(sass({
        outputStyle: 'expanded',
    }))
    .pipe(autoprefixer({
        browsers: ['> 0%'], cascade: false
    }))
    .pipe(gulp.dest('css'))
});

得到:

.example {
    background: -webkit-gradient(linear, left bottom, left top, from(#45678a), to(#ab4563));
    background: -webkit-linear-gradient(bottom, #45678a, #ab4563);
    background: -moz-linear-gradient(bottom, #45678a, #ab4563);
    background: -o-linear-gradient(bottom, #45678a, #ab4563);
    background: linear-gradient(to top, #45678a, #ab4563);
}

想:

.example {
    background: #45678a;
    background: -webkit-gradient(linear, left bottom, left top, from(#45678a), to(#ab4563));
    background: -webkit-linear-gradient(bottom, #45678a, #ab4563);
    background: -moz-linear-gradient(bottom, #45678a, #ab4563);
    background: -o-linear-gradient(bottom, #45678a, #ab4563);
    background: linear-gradient(to top, #45678a, #ab4563);
}

所以我想有背景:#45678a; 如果线性梯度不支持(例如 ie8)。
是否可以使用 autoprefixer 或其他一些“自动...”不写额外的背景属性?谢谢。

4

0 回答 0