Как я могу умножить значение ширины пикселя с LESS Css? - PullRequest
Новая
       6

Как я могу умножить значение ширины пикселя с LESS Css?

9 голосов
/ 05 января 2012

Я пытаюсь настроить заполнение некоторых \ элементов, стилизованных под пилюли, и хочу динамически изменить заполнение. Я знаю, что могу сделать: 

@pill-padding-v: 8px;
@pill-padding-h: 15px;

padding:@pill-padding-v @pill-padding-h;

, который отображает это - и, кажется, работает нормально: 

padding:8px 15px;

Но как мне сделать так, чтобы МЕНЬШЕ добавило к этому 1px отступа? 

@pill-padding-v: 8;
@pill-padding-h: 15;

@pill-padding-v: (@pill-padding-v + 1)
@pill-padding-h: (@pill-padding-h + 1)

padding:@pill-padding-vpx @pill-padding-hpx;

Основной проблем, кажется, добавляет «px» как часть имени переменной. Я получаю ошибку компиляции. Кроме того, я думаю, что синтаксически некорректно использовать 8 px вместо 8px, и это, похоже, не работает в браузерах.

Как можно умножить значение ширины в пикселях на LESS Css?

Ответы [ 2 ]

14 голосов
/ 05 января 2012

Вы правы, что добавление px к переменной вызывает проблемы.Я на самом деле пробовал синтаксис интерполяции, и он не помог, но вы должны в любом случае указывать единицы измерения в своих переменных (px, em, % ...), как в первом рабочем примере.

Вы сказали «умножить», но я думаю, что вы имели в виду «добавить».Там не должно быть никаких проблем, попробуйте это: 

@pill-padding-v: 8px;
@pill-padding-h: 15px;

@pill-padding-v: (@pill-padding-v + 1);
@pill-padding-h: (@pill-padding-h + 1);

element {
    padding:@pill-padding-v @pill-padding-h;
}

Вывод должен быть: 

element { padding:9px 16px; }

... хотя, вы можете просто использовать другое имя переменной или добавить1px прямо в объявлении стиля.Я не думаю, что повторное объявление переменных - это хорошая практика, и я был удивлен, что это сработало.

6 голосов
/ 11 сентября 2014

Помимо добавления, вы можете выполнять любые математические вычисления, используя LESS следующим образом: 

@pill-padding-v: 8;
@pill-padding-h: 15;

element {
/* the numbers I'm multiplying by are arbitrary,
but the value defined in the LESS variable will append
the unit that you multiply it by. */
padding: calc(@pill-padding-v * 3px) calc(@pill-padding-h * 2px);
}

Меньше выходов: 

element {
   padding:calc(24px) calc(30px);
}

Несмотря на то, что она обернута в функцию calc, все в порядке, потому что результат "уравнения" без математического оператора в любом случае является этим значением.

Пользователь seven-phase-max предлагает хорошее замечание: вам не нужна функция calc() в LESS. Это может быть записано в МЕНЬШЕ как: 

element {
   padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);
}
...