Miscrosoft "filter:" extensions in scss

Vaadin 6 / 7 / 8
1

Hello, I have a problem with one of Microsoft’s extensions for gradients:

If colors are fixed inside rule it works:


.v-ui
{
    ...
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#ffffff');
}

But when I put in colors as parameters:


$appCol_back_top: #EEEEEE;
$appCol_mainContent_background_bottom: #ffffff;

.v-ui
{
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=$appCol_back_top, endColorstr=$appCol_mainContent_background_bottom);
}

it fails with following error:


compile-theme:
     [java]
 Error when parsing file 
     [java]
 .../WebContent/VAADIN/themes/test/styles.scss on line 69, column 74
     [java]
 encountered "$appCol_back_top". Was expecting one of: "=" "," ";" "." ")" ":" <INTERPOLATION> <STRING> <IDENT> <NUMBER> <FUNCTION> 
     [java]
 Warning when parsing file 
     [java]
 .../WebContent/VAADIN/themes/test/styles.scss on line 69, column 144
     [java]
 Skipping: }

Can anyone help please?

2

Please try with the latest nightly build or 7.0.2 (due out soon) - there have been some fixes to the SASS parser.

If it doesn’t work:

If I recall correctly, the Microsoft specific extensions are copied to the output as-is at the moment without any processing. In your test, the parser seems to choke on trying to use variables, though, and variable expansion might not be performed even if the parser would accept them.

You can
create a ticket
 about this (with an example).

3

Henri, thank you for your reply.

We have just updated to 7.0.2 and I can confirm that it is working now.