在GWT CssResource基本arithmatic

Question

我正在寻找一个方式做这样的事情：

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

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

其中宽度和高度属性将最终拥有4像素的值。

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页面。

Answer 2

我也喜欢这样的打扮，但这是不可能的。 即使在CSS 3中，他们也没有这样的计划。

如果你真的想这样做，一种可能性是使用 php并配置你的网络服务器，以便.css文件被php解析。

所以你可以做这样的事情

<? 
    $borderSize = 2; 
?> 

.style { 
    width: <? borderSize+2 ?>px; 
    height: <? borderSize+2 ?>px; 
} 

但是，因为这是没有“标准”的方式，我认为它能够更好地这样做。

Answer 3

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); 
} 

窃取了（归属！）这不是跨浏览器，而且它可能只是勉强通过火狐甚至出血边缘支持的版本，但至少还有所取得的进展在那个方向。

Answer 4

你也可以计算出你的供应商的方法，如果你把一个参数的函数：

@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; 
}