arithmatic de base dans GWT CssResource

Question

Je cherche un moyen de faire quelque chose comme ceci:

// style.css 
@def borderSize '2px'; 

.style { 
    width: borderSize + 2; 
    height: borderSize + 2; 
} 

où la largeur et la hauteur des attributs se retrouverait avec des valeurs de 4px.

Answer 1

Parfois j'utiliser les éléments suivants:

@eval BORDER_SIZE_PLUS_2 2+2+"px"; /* GWT evaluates this at compile time! */ 

Bizarrement, cela ne fonctionne, si vous ne mettez pas d'espace entre l'opérateur et les + opérandes. En outre, dans @eval vous ne pouvez pas utiliser les constantes précédemment définies par @def. Vous pouvez toutefois utiliser des constantes qui sont définies comme des champs statiques dans l'une de vos classes Java:

@eval BORDER_SIZE_PLUS_2 com.example.MyCssConstants.BORDER_SIZE+2+"px"; 

Ou vous pourriez laisser le calcul soit effectué entièrement par Java:

@eval WIDTH com.example.MyCssCalculations.width(); /* static function, 
                 no parameters! */ 
@eval HEIGHT com.example.MyCssCalculations.height(); 
.style { 
    width: WIDTH; 
    height: HEIGHT; 
} 

Mais ce que je fait comme à faire est très similaire à votre suggestion:

@def BORDER_SIZE 2; 
.style { 
    width: value(BORDER_SIZE + 2, 'px'); /* not possible */ 
    height: value(BORDER_SIZE + 3, 'px'); 
} 

Je ne pense pas que ce soit possible dans GWT 2.0. Peut-être trouvez-vous une meilleure solution - voici la page Dev Guide sur ce sujet.

Answer 2

J'aimerais aussi quelque chose comme ça, mais ce n'est pas possible. Même en CSS 3 leur rien n'est planifié comme ça.

Si vous voulez vraiment faire quelque chose comme ça, une possibilité est d'utiliser php et configurer votre serveur web, de sorte que les fichiers .css sont analysés par php.

Ainsi, vous pouvez faire quelque chose comme

<? 
    $borderSize = 2; 
?> 

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

Mais comme cela est nullement « standard », je pense que son mieux pour ne pas le faire.

Answer 3

Mozilla sorte de-ne-pas-vraiment-supporte vraiment cela avec sa fonction CSS calc().

Cet exemple volé sans vergogne (avec attribution!) De Ajaxian

/* 
* Two divs aligned, split up by a 1em margin 
*/ 
#a { 
    width:75%; 
    margin-right: 1em; 
} 
#b { 
    width: -moz-calc(25% - 1em); 
} 

Ce n'est pas multi-navigateur, et il est probablement à peine pris en charge par même des versions des saignements de pointe de Firefox, mais il y a au moins être les progrès réalisés dans cette direction.

Answer 4

Vous pouvez également calculer dans votre méthode de fournisseur, si vous mettez un paramètre dans la fonction:

@eval baseFontSize com.myexample.CssSettingsProvider.getBaseFontSize(0)+"pt"; 

@eval baseFontSize_plus_1 com.myexample.CssSettingsProvider.getBaseFontSize(1)+"pt"; 

com.myexample.CssSettingsProvider ressemblerait à ceci:

public static int getBaseFontSize(int sizeToAdd) { 
    if (true) { 
     return 9 + sizeToAdd; 
    } 
    return baseFontSize; 
}