Основная арифметика в GWT CssResource - PullRequest
Новая
       12

Основная арифметика в GWT CssResource

11 голосов
/ 18 июня 2010

Я ищу способ сделать что-то вроде этого: 

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

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

где атрибуты width и height будут иметь значения 4px.

Ответы [ 4 ]

14 голосов
/ 18 июня 2010

Иногда я использую следующее: 

@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 на эту тему.

1 голос
/ 18 июня 2010

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, но, по крайней мере, прогресс в этом направлении достигнут.

0 голосов
/ 06 декабря 2012

Вы также можете рассчитать в методе вашего провайдера, если вы поместите параметр в функцию: 

@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;
}
0 голосов
/ 18 июня 2010

Я бы тоже хотел что-то подобное, но это невозможно.Даже в CSS 3 их не спланировано так.

Если вы действительно хотите сделать что-то подобное, одна возможность - использовать php и настроить ваш веб-сервер так, чтобы файлы .css анализировались php.

Так что вы могли бы сделать что-то вроде 

<?
  $borderSize = 2;
?>

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

Но так как это не «стандартный» способ, я думаю, что лучше этого не делать.

...