Базовая арифметика в GWT CssResource

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

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

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

где атрибуты ширины и высоты в конечном итоге будут иметь значения 4px.


css math gwt cssresource
person Matt    schedule 18.06.2010    source источник

Ответы (4)


arrow_upward
14
arrow_downward

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

@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. Возможно, вы найдете лучшее решение — вот страница Руководства для разработчиков на Эта тема.

person Chris Lercher    schedule 18.06.2010
comment
+1 Хорошие выводы - мне бы очень хотелось, чтобы команда GWT потратила некоторое время на улучшение обработки CssResource - там так много потенциала, как указал Джейсон с функцией calc() от Mozilla. - person Igor Klimer; 19.06.2010
comment
Спасибо за ответ, к сожалению, моя основная причина задать вопрос заключалась в том, чтобы переменная @def была заполнена ресурсом изображения, например, заменить @def borderSize '2px' на @def borderSize value('icon.getWidth', 'px' ); Но я определенно буду использовать эти простые арифметические операции в будущем. - person Matt; 21.06.2010
comment
Вы можете сделать: @eval borderSizePlusTwo icon.getWidth()+2+px - person Roy Paterson; 18.01.2012
comment
Похоже, эта функция была удалена в GWT 2.5. Я только что обновился, и это больше не работает (сбой во время выполнения, а не во время компиляции) :-( - person Roy Paterson; 30.10.2012
comment
@Roy: Я только что снова проверил их с GWT 2.5.0 - и они все еще работают для меня. Какое точное утверждение, включая пробельные символы! - перестал работать на вас? (Вы очищали каталог gwt-unitCache, WEB-INF/classes и т. д. после обновления?) - person Chris Lercher; 30.10.2012
comment
@RoyPaterson FYI @eval varName icon.getWidth()+2+"px" работает только в том случае, если вы уже используете value('icon.anyMethod', 'px') в своем файле css. В противном случае это не так. Я обычно создаю фиктивное правило с такими ссылками, если это необходимо. - person Andrea Zilio; 20.03.2013

arrow_upward
1
arrow_downward

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

person Jason Hall    schedule 18.06.2010

arrow_upward
0
arrow_downward

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

@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;
}
person Stefan Bicher    schedule 06.12.2012

arrow_upward
-3
arrow_downward

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

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

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

<?
  $borderSize = 2;
?>

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

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

person Marks    schedule 18.06.2010