scss variables in plain css functions

Vaadin 6 / 7 / 8
1

Hi,

I know that currently not all SASS functions are supported by the compiler yet.
What I’m trying to do however, is to pass a color variable to the standard css linear-gradient function, e.g.:


.v-window-footer {
    background: linear-gradient(0deg,$very_light1,$light1);
}

But this doesn’t seem to work, while it does if I replace the variables with direct color values.
Is this a bug, or just not supported (yet)? I was hoping these kinds of things would be possible using variables.

Thanks
Herman

2

Hi Herman, Can you tell more about your use case? What color were you using?
I created one test case


$very_light1: #aabbcc;
$light1: #bcd;
.v-window-footer {
    background: linear-gradient(0deg,$very_light1,$light1);
}

The generated css is


.v-window-footer {
    background: linear-gradient(0deg, #aabbcc, #bcd);
}

Which is as expected.

3

Using this:

$very_light: 98%;
$light: 90%;

$hue1: 110;
$saturation1: 50%;
$very_light1: hsl($hue1, $saturation1, $very_light); 
$light1: hsl($hue1, $saturation1, $light); 

.v-window-footer {
    background: linear-gradient(bottom, $very_light1, $light1);
}

the generated CSS becomes:

.v-window-footer {
    background: linear-gradient(bottom, 0%, null(null));
}
4

Hi Herman, thank you for your post. Sorry, it is a bug of the compiler. I’ve committed code changes to fix this bug, and it will be merged to later version of Vaadin
After fix, the output is

.v-window-footer {
    background: linear-gradient(bottom, hsl(110, 50%, 98%),  hsl(110, 50%, 90%));
}
5

I’m glad I could help to improve the compiler. It would be great if this could be merged into 7.0.1 already.

Thanks
Herman

6

Coming to 7.0.1 (related to
#10508
).