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 中是不可能的。也许您会找到更好的解决方案 - 这是有关此主题的开发指南页面。

Answer 2

Mozilla kind-of-sort-of-not-really 用它的 CSScalc()函数支持这一点。

这个例子无耻地从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 并配置您的网络服务器，以便 .css 文件由 php 解析。

所以你可以做类似的事情

<?
  $borderSize = 2;
?>

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

但由于这不是“标准”方式，我认为最好不要这样做。