How can I use the same @def in multiple CssResource css files?

Question

I'd like to say, in a single, centralized location,

@def mainColor = #f00;

and then, in all of my other css files, refer to mainColor without having to redefine it. Then when I change mainColor in once place, my entire app changes color.

The best way I can think of so far is to include two @Source files for every CssResource declaration and always include the global def file. Are there any other ways?

Answer 1

As far as I know, this is your only option:

style.css

@def mainColor #f00;

*.ui.xml

<ui:style src="../../../styles/style.css">
    .widget{ color: mainColor; }
</ui:style>

The downside to this is the relative path. Each ui.xml will require a different src path.

Alternatively, if you dont mind using a Constants.java file (instead of css), you could use @eval

<ui:style>
  @eval mainColor com.myproject.client.Styles.INSTANCE.mainColor(); 
  .widget{ color: mainColor; }
</ui:style>