Использование математических функций для получения целочисленных значений - PullRequest
Новая
       2

Использование математических функций для получения целочисленных значений

3 голосов
/ 16 августа 2011

У меня есть LessCSS, который по сути выглядит следующим образом: 

.foo {
    @height: 20px;
    @iconHeight: 13px;

    background-position: 0 (@height - @iconHeight) / 2;
}

Однако, очевидно, это получается как background-position: 0 3.5px, и я бы предпочел, чтобы это было целое число (значение Math.ceil), однако это не работает: 

background-position: 0 Math.ceil((@height - @iconHeight) / 2)

Также не используется оператор оценки javascript: 

background-position: 0 `Math.ceil((@height - @iconHeight) / 2)`

..., поскольку он анализируется как Math.ceil(20px - 13px) и "px "есть синтаксическая ошибка.

Я даже пытался использовать parseInt

0 `Math.ceil((parseInt('@{height}', 10) - parseInt('@{iconHeight}', 10)) / 2)`px

Однако получается так: 

background-position: 0 4 px

..что не правильно.И, наконец, даже добавление «px» в оценку JS не работает 

background-position: 0 `Math.ceil(....) + "px"`;
// becomes
background-position: 0 "4px";

Конечно, есть лучший способ!

1 Ответ

6 голосов
/ 19 ноября 2011

Существует простой обход проблемы с использованием временной переменной и 0px хака. 

.foo {
    @height: 20px;
    @iconHeight: 13px;

    @result: `Math.ceil((parseInt('@{height}') - parseInt('@{iconHeight}')) / 2)`;
    background-position: 0 (0px + @result);
}
...