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 mainColo

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>