multiple gradient to sass variable

Question

I want to add multi-browser based single gradient value to one sass variable. Help me with syntax. I tried below syntax but not getting result. Compiler aborts.

$bg-gradient : -moz-linear-gradient( 90deg, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%), -webkit-linear-gradient(left, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%), -o-linear-gradient(left, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%), linear-gradient(to right, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%),

The Bourbon mixin library has a mixin specifically for this: bourbon.io/docs/#linear-gradient — alexbea

jbrya029 jbrya029 · Accepted Answer · 2016-05-07T14:49:48

I don't think you can accomplish this as a sass variable; however, it is possible to use a mixin to get the same result:

@mixin bggradient() {
    -moz-linear-gradient( 90deg, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%), 
    -webkit-linear-gradient(left, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%), 
    -o-linear-gradient(left, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%), 
    linear-gradient(to right, rgb(32,40,0) 0%, rgb(56,72,0) 49%, rgb(84,111,0) 100%),
}

Then to call this mixin in your sass code:

@include bggradient();

Here is more information about mixins: http://sass-lang.com/guide

multiple gradient to sass variable

1 Answers