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