valo overwrites global variable $darkest


$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;

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 {

protected void init(VaadinRequest request) {
	VerticalLayout layout = new VerticalLayout();
	Button button = new Button(CLICK_ME);


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.