私はこのようなことをする方法を探しています:
// 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 クラスの 1 つで静的フィールドとして定義されている定数を使用できます。
@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 ではそれは不可能だと思います。より良い解決策が見つかるかもしれません。このトピックに関する開発者ガイドのページはこちらです。
Mozilla は、CSScalc()
関数でこれをサポートしています。
この例は、Ajaxianから恥知らずに盗用されました (出典付きで!)
/*
* 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 サーバーを構成し、.css ファイルが php によって解析されるようにすることが 1 つの可能性です。
だからあなたは次のようなことができます
<?
$borderSize = 2;
?>
.style {
width: <? borderSize+2 ?>px;
height: <? borderSize+2 ?>px;
}
しかし、これは「標準的な」方法ではないので、やらないほうがよいと思います。