Skip to content
This repository was archived by the owner on May 5, 2022. It is now read-only.
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

@vaadin-bot

Description

@vaadin-bot

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions