css - GWT CssResource 中的基本算法

Question

我正在寻找一种方法来做这样的事情:

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

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

width 和 height 属性最终的值为 4px。

Answer 1

有时我会使用以下内容:

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

奇怪的是，这仅在您不在 + 运算符和操作数之间放置任何空格时才有效。另外，在@eval 中你不能使用之前由@def 定义的常量。但是，您可以使用在您的某个 Java 类中定义为静态字段的常量:

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

或者您可以让计算完全由 Java 执行:

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

但我实际上想做的与您的建议非常相似:

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

我认为这在 GWT 2.0 中是不可能的。也许您找到了更好的解决方案 - 这里是 Dev Guide关于此主题的页面。