Экранируем LESS-переменные

Переменные в 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. Вы же можете выбрать тот, который больше нравится вам.

Нескучной верстки!