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?

Mantoman

You are using proprietary properties, you need to use a general property too inorder to make your gradient work – Ezra

What "doesn't work"? There's an error (what is the error?)? The generated output is wrong (what's wrong with it?)? – Mccubbin

It doesn't show any error, just doesn't do the gradient. – Mantoman

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!

Unbowed

Looked it up, this is called Interpolation sass-lang.com/documentation/… Thanks @Unbowed – Numskull

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

Cantata

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

Bearwood

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.

Zloty

How to set the angle of linear-gradient. It is possible to set an angle in a variable. – Accordant

@NupurJ., the syntax to add a 45° angle would be this: $angle: "45deg"; background: linear-gradient(#{$angle},#eeeeee,#222ccc) – Zloty

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

Allegory

The main reason is to use these colors in all the css file, because I use these in many places in the code. – Mantoman

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...

Peden

That's sad. I want to use these in many places in the code, and if I want to change on of them, I have to write every single of them.. – Mantoman

I will, I hope the vaadin developers can fix this issue. :) – Mantoman