In my theme .scss main file I have the following style:
.v-button.myClass {
background-image: linear-gradient(to bottom, #f6ff73 2%, #eae653 98%);
}
This is what I get in my .css file after compiling:
.tmtTheme .v-button.btnInci.roig {
background-image: linear, to bottom, zip(#f6ff73 2% #eae653 98%);
}
As you can see, the resulting compiled style is nonsensical.
In fact, I just realized all my background-image using linear-gradient are nonsensical in compiled .css file.
I’ve even seen things as absurd as this after trying to add some other styles before and after the background-image line:
I also stumbled over this “issue” a few months ago.
In my understanding is the reason for this problem that the vaadin sass compiler / valo includes during compilation a “library” called bourbon. This library has predefined functions and classes for creating gradients. Since these functions have the exact same name as the css functions they will be called during compilation and replace your attribute value by their return value.
These functions are meant to do the same but additionally provide backward compability by adding fallback attributes for older browsers which do not support the new attributes.
Instead of writing this
.v-button.myClass {
background-image: linear-gradient(to bottom, #f6ff73 2%, #eae653 98%);
}
[/code]Which will be unfortunatly compiled to this[code]
.v-button.btnInci.roig {
background-image: linear, to bottom, zip(#f6ff73 2% #eae653 98%);
}
Do this
.v-button.myClass {
@include linear-gradient(to bottom, #f6ff73 2%, #eae653 98%);
}
Which should result in a proper gradient at “runtime”!
Thanks a lot, Johannes. You comment it’s been of incredibly great help (my current “workaround” was to totally avoid using a gradient for background, and using a plain background color instead).
I took a look at the Valo theme docs and suspected that I could do something like this, but unfortunately the docs are not written for dumb people like me and finally abandoned the idea, blaming the SCSS compiler as having a bug when parsing background-image property.
Anyway, again, I think it would do no harm to lost users like me if this was stated more clearly somewhere.