Используя LESS, как я могу вычитать значения с "px" в конце переменной. У меня есть следующая переменная:
@bpMobile: 600px
Что я хочу сделать, это вычесть это на 1px
@media only screen and (max-width: @bpMobile - 1px ) {
}
Как я могу достичь этого с помощью LESS?
Извините, что ответила на это поздно, но у меня была эта проблема, и кажется, что МЕНЬШЕ было разборчиво относительно интервала. Вам также нужно () вокруг ваших вычислений.
Это не сработает:
@media screen and (max-width: (@widthSmall-2)) { }
Однако это будет (обратите внимание на пробел между переменной и цифрой):
@media screen and (max-width: (@widthSmall - 2)) { }
Вы можете всегда использовать calc function для этого.
Синтаксис:
calc(expression)
Например:
abc {
width:calc(100%-20px)
}
Здесь - список браузера, который поддерживает эту функцию
РЕДАКТИРОВАТЬ 1:
вы можете использовать его двумя способами:
LESS Вход:
@bpMobile: 600px;
max-width: calc(~'@{bpMobile} - 1px');
Выход CSS:
max-width: calc(600px - 1px);
Второй способ: Меньше ввода:
@bpMobile: 600px;
max-width: calc(@bpMobile - 1px);
Выход CSS:
max-width: calc(599px);
При первом варианте аргументы calc выходят из строя, чтобы предотвратить их оценку при компиляции. Значения останутся полностью статичными до тех пор, пока они не будут оценены клиентом.
При втором варианте значение calc будет оцениваться при компиляции. И это будет то же самое, что
max-width: @bpMobile - 1px;
что приведет к
max-width: 599px;
Проблема заключается не в математической функции, а в том, что вы пытаетесь использовать ее в медиа-запросе. Документы говорят, что вам нужно сделать весь запрос одной переменной:
@bpMobile: 600px;
@bpMobile1: @bpMobile - 1px;
@singleQuery: ~"only screen and (max-width: @{bpMobile1})";
@media @singleQuery {
}
Исправление от freejosh не работает для меня на lesscss 1.7.0.
Что трюк просто добавляет paranthesis вокруг каждой переменной или вычисления внутри медиа-запроса:
@media only screen and (max-width: (@bpMobile - 1px) ) { ... }
или
@other: @bpMobile - 1px;
@media only screen and (max-width: (@other) ) { ... }