我正在寻找一种方法来做这样的事情：
// style.css
@def borderSize '2px';
.style {
width: borderSize + 2;
height: borderSize + 2;
}
其中width和height属性最终的值为4px。
我正在寻找一种方法来做这样的事情：
// style.css
@def borderSize '2px';
.style {
width: borderSize + 2;
height: borderSize + 2;
}
其中width和height属性最终的值为4px。
有时我会使用以下内容：
@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中这是可能的。也许你找到了一个更好的解决方案 - 这就是 开发指南 有关此主题的页面。
使用它的CSS，Mozilla并不真正支持它 calc() 功能。
这个例子无耻地被盗（有归属！）来自 才算是Ajax
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
width:75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}
它不是跨浏览器的，它可能只是几乎不受Firefox最新版本的支持，但至少在这方面取得了进展。
如果在函数中放入参数，也可以在提供者方法中计算：
@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;
}
我也喜欢这样的东西，但这是不可能的。 即使在CSS 3中，他们也没有像这样的计划。
如果你真的想做类似的东西，一种可能性就是使用 php并配置你的web服务器，以便php解析.css文件。
所以你可以做点什么
<?
$borderSize = 2;
?>
.style {
width: <? borderSize+2 ?>px;
height: <? borderSize+2 ?>px;
}
但由于这不是“标准”方式，我认为最好不要这样做。