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中是可能的。 也許您找到了更好的解決方案 - 這是關於此主題的開發指南頁面。

Answer 2

使用它的CSS calc()函數，Mozilla有點不支持。

這個例子從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;
}

Answer 4

我也喜歡那樣的東西，但這是不可能的。 即使在CSS 3中，他們也沒有像這樣的計划。

如果你真的想做類似的東西，一種可能性是使用php並配置你的web服務器，以便.css文件由php解析。

所以你可以做點什么

<?
  $borderSize = 2;
?>

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

但由於這不是“標准”方式，我認為最好不要這樣做。