2

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?

Riley Lark
  • 20,660
  • 15
  • 80
  • 128
  • Could you please add your own @Source example as another 'answer' for comparison? – checketts Feb 15 '12 at 06:02
  • 1
    I just added it as a comment to Danny Kirchmeier's answer below. It's essentially the same technique, with a different syntax and context. – Riley Lark Feb 15 '12 at 13:31

1 Answers1

5

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>
Danny Kirchmeier
  • 1,134
  • 6
  • 14
  • Oof. Thanks for the suggestions. These are pretty rough, though ;) – Riley Lark Feb 14 '12 at 22:58
  • 2
    @Thomas Broyer added at https://groups.google.com/forum/#!msg/google-web-toolkit/c8XdDoxDNZA/dWtkdAENYXMJ that he uses this method, too. Outside of uibinders he mentioned the multiple @Source technique: `@Source({"path/to/definitions.css", "foo.css"}) FooStyles foo;` – Riley Lark Feb 15 '12 at 13:31