arithmétique 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ù les attributs de largeur et de hauteur finiraient ayant des valeurs de 4px.

Answer 1

Parfois, j'utilise les éléments suivants:

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

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

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

Ou vous pouvez 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 voudrais en fait que de 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 vous trouver une meilleure solution - est ici la page de Guide Dev ce sujet.

Answer 2

Mozilla de type de tri de-pas-vraiment appuie cette avec sa fonction calc() CSS.

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

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

Il est pas multi-navigateur, et il est probablement à peine pris en charge par même des versions de Firefox bleeding edge, mais il y a au moins être les progrès réalisés dans ce sens.

Answer 3

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;
}

Answer 4

J'aimerais aussi somehting comme ça, mais ce n'est pas possible. Même en CSS 3 leur est rien prévu 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.

Alors 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.