Экранируем LESS-переменные
- 554 просмотра
- 3 ноября, 2023
- Обновлено: 3 ноября, 2023
- admin
- Время чтения: 2 минуты
Переменные в LESS – это большое благо для разработчиков, особенно для тех из них, кто стремится к унификации и единообразию в рамках отдельно взятого проекта. Вкратце напомним, как это выглядит:
@myborder: 3px solid #000; @myradius: 2px; ... div.someblock { border: @myborder; border-radius: @myradius; }
Все замечательно, однако препроцессор LESS имеет свои маленькие слабости. Одной из них является тире или знак “минус”. При использовании этого символа, например, в CSS-функции calc(), компилятор выдаст ошибку. Бороться с ней можно экранированием:
// Так ошибка: div.someblock { width: calc((100% - 1rem) / 2); } // Так ок: div.someblock { width: ~'calc((100% - 1rem) / 2)'; }
Но что если нам необходимо использовать внутри CSS-функции LESS-переменные? Ведь экранируя ее полностью, мы лишаем себя такой возможности. Впрочем, решение есть, даже два!
Во-первых, мы можем заэкранировать сам знак “минус”. В таком случае компилятор проигнорирует только его, и это не отразится на всей нашей конструкции. Во-вторых, можно оставить экранирование для всей функции, а переменные внутри нее указать в особой записи. Ниже приведены оба примера:
@rm: .5rem; ... // Можно так: div.someblock { width: calc((100% ~'-' @rm) / 2); } // А можно и так: div.someblock { width: ~'calc((100% - @{rm}) / 2)'; }
Для меня более наглядным является второй вариант, который напоминает шаблонные литералы javascript. Вы же можете выбрать тот, который больше нравится вам.
Нескучной верстки!
Была аналогичная ситуация и проявлялась только в Google Chrome. Лечилось в отладчике добавлением пробела между знаком "минус" и скобкой. Оказалось, именно из-за "лишних" скобок. В Мозилле все прекрасно отрабатывало.
Новый комментарий