aritmética básica en GWT CssResource

Question

Estoy buscando una manera de hacer algo como esto:

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

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

donde el ancho y la altura de los atributos podría llegar a tener valores de 4 píxeles.

Answer 1

veces uso el siguiente:

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

Curiosamente, esto sólo funciona si usted no pone ningún espacio entre el operador y + los operandos. Además, en @eval no puede usar constantes definidas previamente por @def. Sin embargo, puede utilizar las constantes que se definen como campos estáticos en una de sus clases de Java:

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

O puede dejar que el cálculo se realiza completamente por Java:

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

pero lo que en realidad como hacer es muy similar a su sugerencia:

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

No creo que sea posible en GWT 2.0. Quizás encuentre una mejor solución: aquí está la página Dev Guide sobre este tema.

Answer 2

También me encantaría algo así, pero no es posible. Incluso en CSS 3 no hay nada planeado así.

Si realmente quiere hacer algo como eso, una posibilidad es usar php y configurar su servidor web, para que los archivos .css sean analizados por php.

Por lo que podría hacer algo como

<? 
    $borderSize = 2; 
?> 

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

Pero como esto de ninguna manera 'estándar', creo que es mejor que no lo haga.

Answer 3

Mozilla tipo-de-tipo-de-no-realmente-esto es compatible con su función CSS calc().

Este ejemplo robado descaradamente (con la atribución!) De Ajaxian

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

No es multi-navegador, y es probable que sólo apenas apoyado por incluso versiones de punta sangrado de Firefox, pero hay al menos está avanzando en esa direccion.

Answer 4

También se puede calcular en su proveedor de método, si se pone un parámetro de la función:

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

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

com.myexample.CssSettingsProvider se vería así:

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