0


Have this:

style.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'))
});

Get:

.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);
}

Want:

.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);
}

So i want to have background: #45678a; in case when linear-gradient doesn't support (i.g. ie8).
Does it possible with autoprefixer or some other 'auto...' not to write extra background property? Thanks.

g1un
  • 374
  • 5
  • 20
  • Don't worry about it, browsers that cannot understand your `background: gradient` will automatically use it, since nothing else gets parsed. – roberrrt-s Sep 05 '16 at 14:16
  • https://css-tricks.com/css3-gradients/ has more on the matter, and explains the usage for your case as well. – roberrrt-s Sep 05 '16 at 14:17
  • @Roberrrt Thanks, I've read your link. And only compass transforms linear-gradient as I want (http://compass-style.org/examples/compass/css3/gradient/) Is there a way using gulp? – g1un Sep 06 '16 at 08:01
  • Could this be related to your problem? https://github.com/postcss/autoprefixer/issues/204 EDIT: no, not really – roberrrt-s Sep 06 '16 at 08:04
  • OH, wait, is your problem that gulp overwrites your fallback background when autoprefixing? – roberrrt-s Sep 06 '16 at 08:06
  • @Roberrrt I have no fallback bg. I want gulp to add it like compass does. – g1un Sep 06 '16 at 08:12
  • Ah, i'm silly. I'm afraid gulp doesn't do that, you'll have to either a.) manually insert it or b.) write a custom rule for it. – roberrrt-s Sep 06 '16 at 08:14
  • https://github.com/mikezens/Gulp-JS-Example/blob/master/src/assets/sass/mixins/bourbon/bourbon/css3/_radial-gradient.scss See this example, you'll manually have to include it. – roberrrt-s Sep 06 '16 at 08:16
  • 1
    @Roberrrt 'm a n u a l l y'. This is the reason i 've asked this question. As I've understood, you suggest to write scss mixin? It's what i want to exclude. Most of all because It doesn't count actual browser support (except you'll correct mixin manually every time, you want to change support) and it cant convert gradient into data-uri as well (not critical, but nice thing). – g1un Sep 06 '16 at 08:43
  • Yeah, it's quite odd that there's no basic gulp task for this, I suppose there could be a way to write a gulp task to include it every time you need it, but that's basically the gulp version of a mixin ;). – roberrrt-s Sep 06 '16 at 08:47
  • @Roberrrt anyway, thanks. It's a pity, no magic pill.( Maybe will look towards gulp-compass. – g1un Sep 06 '16 at 08:51

0 Answers0