Question: I'm looking for a way to do something like this:

```
// style.css
@def borderSize '2px';

.style {
  width: borderSize + 2;
  height: borderSize + 2;
}

```

where the width and height attributes would end up having values of 4px.

Answer: 
Sometimes I use the following:

```
@eval BORDER_SIZE_PLUS_2 2+2+"px"; /* GWT evaluates this at compile time! */

```

Oddly, this only works, if you don't put any spaces between the `+` operator and the operands. Also, in @eval you can't use constants that were previously defined by @def. You can however use constants that are defined as static fields in one of your Java classes:

```
@eval BORDER_SIZE_PLUS_2 com.example.MyCssConstants.BORDER_SIZE+2+"px";

```

Or you could let the calculation be performed completely by Java:

```
@eval WIDTH com.example.MyCssCalculations.width(); /* static function, 
                                                      no parameters! */
@eval HEIGHT com.example.MyCssCalculations.height();
.style {
    width: WIDTH;
    height: HEIGHT;
}

```

But what I would actually like to do is very similar to your suggestion:

```
@def BORDER_SIZE 2;
.style {
    width: value(BORDER_SIZE + 2, 'px'); /* not possible */
    height: value(BORDER_SIZE + 3, 'px');
}

```

I don't think that's possible in GWT 2.0. Maybe you find a better solution - here's the [Dev Guide](http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource) page on this topic.
Mozilla kind-of-sort-of-not-really supports this with it's CSS `calc()` function.

This example shamelessly stolen (with attribution!) from [Ajaxian](http://ajaxian.com/archives/css-calc-in-the-house)

```
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}

```

It's not cross-browser, and it's probably only barely supported by even bleeding-edge versions of Firefox, but there's at least being progress made in that direction.