Основная арифметика в GWT CssResource
Я ищу способ сделать что-то вроде этого:
// style.css
@def borderSize '2px';
.style {
width: borderSize + 2;
height: borderSize + 2;
}
где атрибуты ширины и высоты закончили бы тем, что имели значения 4 пкс.
3 ответа
Иногда я использую следующее:
@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. Возможно, вы найдете лучшее решение - вот страница Dev Guide по этой теме.
Я бы тоже хотел что-то подобное, но это невозможно. Даже в CSS 3 ничего подобного не планируется.
Если вы действительно хотите сделать что-то подобное, одна из возможностей - использовать php и настроить ваш веб-сервер так, чтобы файлы .css анализировались php.
Так вы можете сделать что-то вроде
<?
$borderSize = 2;
?>
.style {
width: <? borderSize+2 ?>px;
height: <? borderSize+2 ?>px;
}
Но так как это не "стандартный" способ, я думаю, лучше не делать этого.
Mozilla не очень-то поддерживает это с помощью функции CSS calc () .
Этот пример беззастенчиво украден (с указанием авторства!) Из Ajaxian
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
width:75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}
Это не кроссбраузерность, и, вероятно, едва ли поддерживается даже новейшими версиями Firefox, но, по крайней мере, в этом есть прогресс. направление.