This repository was archived by the owner on May 5, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 26
This repository was archived by the owner on May 5, 2022. It is now read-only.
Sass compiler variable value replacing is not fully working #168
Copy link
Copy link
Closed
Labels
Description
Originally by s0Rt
The Eclipse included SASS Compiler provided by Vaadin Eclipse Plugin did not replace all variables with the related value after compiling. I recognized this error using an rgba-holding variable in css3 linear-gradient property.
The code looks as follows:
$colorRgbaLeft: 240, 45, 12, 0.9;
$colorRgbaRight: 115, 22, 6, 1;
.query-bar-color {
background: -webkit-linear-gradient(left, rgba($colorRgbaLeft), rgba($colorRgbaRight)); /* For Safari */
background: -o-linear-gradient(right, rgba($colorRgbaLeft), rgba($colorRgbaRight)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba($colorRgbaLeft), rgba($colorRgbaRight)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba($colorRgbaLeft), rgba($colorRgbaRight)); /* Standard syntax (must be last) */
}
The following output was suspected:
.query-bar-color {
background: -webkit-linear-gradient(left, rgba(240, 45, 12, 0.9), rgba(115, 22, 6, 1));
background: -o-linear-gradient(right, rgba(240, 45, 12, 0.9), rgba(115, 22, 6, 1));
background: -moz-linear-gradient(right, rgba(240, 45, 12, 0.9), rgba(115, 22, 6, 1));
background: linear-gradient(to right, rgba(240, 45, 12, 0.9), rgba(115, 22, 6, 1));
}
But got the following output:
.query-bar-color {
background: -webkit-linear-gradient(left, rgba($queryPositBarColorRgbaLeft), rgba($queryPositBarColorRgbaRight));
background: -o-linear-gradient(right, rgba($queryPositBarColorRgbaLeft), rgba($queryPositBarColorRgbaRight));
background: -moz-linear-gradient(right, rgba($queryPositBarColorRgbaLeft), rgba($queryPositBarColorRgbaRight));
background: linear-gradient(to right, rgba($queryPositBarColorRgbaLeft), rgba($queryPositBarColorRgbaRight));
}
If i am using the variable for defining rgba value inside a simple background property like:
$colorRgbaLeft: 240, 45, 12, 0.9;
.query-bar-color {
background: rgba($colorRgbaLeft);
}
everything is working fine and the file is compiled correctly. Please fix this issue. Many thanks in adavance.
Imported from https://dev.vaadin.com/ issue #13312