Sass variables and gradient

Question

Hy everyone! I want to use Sass variables with in a Vaadin 7.1.0 project for a linear gradient background, but some reason it doesn't work. The code:

$topBarDarkBlue: #5F7FB7;
$topBarLightBlue: #8EABE1;

.title {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue),
    color-stop(100%, $topBarLightBlue));
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%);
    width: 100%;
    height: 70px;
}

It seems to be correct, but why it doesn't work?

Answer 1

You can indeed put SASS variables into brackets, like the gradient selector syntax. All you have to do is enclose your variable with a preceeding hash-mark and then parentheses, like so:

#{$myVar}

That's it!

Answer 2

Scss mixin:

@mixin purple-gradient($attribute) {
  #{$attribute}: -webkit-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: -moz-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: -ms-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: -o-linear-gradient($second-color-for-gradient, $purple) !important;
  #{$attribute}: linear-gradient($second-color-for-gradient, $purple) !important;
}

Answer 3

The best way of using gradients globally in .sass/.scss is using them through mixins.

you can create a mixins of your gradient:

$topBarDarkBlue: #5F7FB7;
$topBarLightBlue: #8EABE1;

@mixin bg-gradient(){
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue);
background: -moz-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue);
background: -ms-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue);
}

Now you just need to call it in your main .sass/.scss file.

.title{
@include bg-gradient();
}

I have done this before in one of my recent project but it was not based on Vaadin. Just check this works with vaadin or not. Check syntax once of the scss code as I am an Sass guy.

Hope it will help you

Answer 4

I'm not sure if anyone is still interested, but it seems that there's an issue with sass compiling uppercase hex values in the linear-gradient declarations. For example, this does not work:

$colorTop: #EEEEEE;
$colorBottom: #222CCC;

.element { 
  background: linear-gradient($colorTop,$colorBottom); 
}

This, on the other hand, does work:

$colorTop: #eeeeee;
$colorBottom: #222ccc;

.element { 
  background: linear-gradient($colorTop,$colorBottom); 
}

So if you're having this issue, try using lowercase hex values in your variable declarations.

Answer 5

If you copy the code to JSFiddle the gradient is working. It's also possible to put the variables in the css class:

.title {
    $topBarDarkBlue: #5F7FB7;
    $topBarLightBlue: #8EABE1;

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue),
    color-stop(100%, $topBarLightBlue));
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%);
    width: 100%;
    height: 70px;
}

Answer 6

It looks like the SCSS compiler in Vaadin 7.1 is not able to replace variables correctly so you have to use color values instead of variables. Change

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue)

to

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5F7FB7)

etc...