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

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

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

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

который делает это - и, похоже, работает нормально:

padding:8px 15px;

Но как я могу заставить LESS добавить к этому 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?


css less
person cwd    schedule 05.01.2012    source источник
comment
Умножить или добавить? Вы, кажется, запутались (а может быть, это только я).   -  person Wesley Murch    schedule 05.01.2012

Ответы (2)


arrow_upward
16
arrow_downward

Вы правы, добавление 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 прямо в объявление стиля. Я не думаю, что повторное объявление переменных является хорошей практикой, и был действительно удивлен, что это сработало.

person Wesley Murch    schedule 05.01.2012
comment
Хороший. Логически просто не казалось, что синтаксис стиля javascript LESS может взять (8px + 1) и получить 9px. - person cwd; 05.01.2012
comment
Я не уверен, почему это должно быть так, но круглые скобки вокруг уравнения абсолютно необходимы - имеет ли + какое-то значение в CSS (помимо непосредственного родственного элемента при использовании в селекторе)? - person Jon z; 13.05.2014
comment
@Jonz Насколько я знаю, + не используется в CSS для каких-либо других целей. Я использую PHP-порт LESS, и он довольно умен в отношении операторов, я обычно не использую круглые скобки. - person Wesley Murch; 13.05.2014
comment
@Jonz + можно использовать в селекторной части объявления CSS для выбора следующего брата. Например. .whatever + p, чтобы выбрать p рядом с (после) .whatever -- но я сомневаюсь, что это связано... - person Josh M.; 13.06.2016

arrow_upward
8
arrow_downward

Помимо добавления, вы можете выполнять любые математические вычисления с помощью 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-Phases-Max есть хорошая идея: вам не нужна функция calc() в LESS. Это можно записать в LESS как:

element {
   padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);
}
person itsmikem    schedule 10.09.2014
comment
И есть ли цель calc там? - person seven-phases-max; 11.09.2014
comment
Функция calc() проведет некоторые математические расчеты, чтобы вычислить для вас значение. И волшебство заключается в том, что когда вы умножаете его на число с единицей измерения (em, px и т. д.), результат принимает эту единицу. - person itsmikem; 11.09.2014
comment
Да, извините за неясный вопрос. Я знаю, что означает calc в CSS, но что он делает в calc(24px)? Подсказка: вам не нужно calc для @pill-padding-v * 3px и т. д. - person seven-phases-max; 11.09.2014
comment
Он абсолютно ничего не делает в calc(24px). Это результат LESS. Дело в том, что LESS сделал математику, но вы не можете удалить слово calc из полученного CSS. Однако это не имеет значения, потому что это все равно, что сказать: «Вычисли число 5, и результат, конечно же, будет 5». - person itsmikem; 11.09.2014
comment
Чтобы удалить calc из полученного CSS, просто удалите его из кода Less, например. код в вашем ответе может быть просто: padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);. - person seven-phases-max; 11.09.2014