GWT CssResource中的基本算法

Question

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

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

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

其中宽度和高度属性的值最终将为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');
}

我认为这在GWT2.0中是不可能的。也许你会找到一个更好的解决方案--这是关于这个主题的Dev Guide页面。

Answer 2

Mozilla通过它的CSS calc()函数来支持这一点。

这个例子厚颜无耻地被偷了(带归属！)来自Ajaxian

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

它不是跨浏览器的，即使是最先进的Firefox版本也可能仅能勉强支持它，但至少在这个方向上取得了进展。

Answer 3

如果你在函数中放了一个参数，你也可以在你的提供者方法中进行计算：

@eval baseFontSize com.myexample.CssSettingsProvider.getBaseFontSize(0)+"pt";

@eval baseFontSize_plus_1 com.myexample.CssSettingsProvider.getBaseFontSize(1)+"pt";

com.myexample.CssSettingsProvider将如下所示：

public static int getBaseFontSize(int sizeToAdd) {
    if (true) {
        return 9 + sizeToAdd;
    }
    return baseFontSize;
}