Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
valo overwrites global variable $darkest
test.scss:
===========
$darkest: #304430;
$my-darkest: #304430;
@import "../valo/valo.scss";
@mixin test {
@include valo;
// Insert your own theme rules here
.v-button {
background-image: none;
background-color: $darkest;
color: yellow;
}
}
TestUI.java:
===========
@Theme("test")
public class TestUI extends UI {
private static final String CLICK_ME = "Click me";
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = TestUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
Button button = new Button(CLICK_ME);
layout.addComponent(button);
setContent(layout);
}
}
If background-color of v-button is set to $my-darkest, everything is fine; but with darkest the rendered background-color is: #fafafa
The variable $darkest is (locally) defined within the function: darkest-color, which itself is defined within _color.scss of the valo theme.
Ok, then $darkest becomes global because the Vaadin-SASS-Compiler is only compatible to SASS language version 3.3.0.
The SASS language version 3.4.x makes it possible to have a variable $darkest locally in the function darkest-color and another variable $darkest globally.
Is it planned that the Vaadin-SASS-Compiler gets compatible with SASS version 3.4.x in the near future?
Thanks for your answer.