Less — Урок 12. Экранирование

Привет! В этом уроке немного про экранирование (Escaping), которое позволяет использовать любую произвольную строку в качестве значения свойства или переменной.

Необходимо обернуть в двойные кавычки и поставить знак тильды ~ перед выражением, чтобы ~ «anything» или ~ ‘anything’ использовалось как есть, без изменений, кроме интерполяции.

Пример с функцией calc()

В Less до версии 3.0 не было совместимости для calc(), поэтому необходимо было в .less файле экранировать данную часть.

Допустим, требуется вычислить ширину блока. Если бы до версии 3.0. в .less сделали обычную запись:

.block {
  width: calc(100% - 50px); // вычисляем ширину блока
}

то на выходе в bundle.min.css получили бы результат:

.block {
  width: calc(50%);
}

В таком случае приходилось экранировать значение и оборачивать в знак тильды ~ и кавычки следующим образом:

.block {
  width: ~"calc(100% - 50px)"; // экранируем
}

Сейчас уже поддерживается calc(), что видно на скриншоте по компиляции свойств для .block-2.

Пример с @media

Ещё вариант при написании медиа-запросов, который так же, не актуален на сегодняшний день, но подходит в качестве примера. Допустим, нам нужно задать стили для экранов с минимальным разрешением 768px:

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

Результатом будет:

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

Согласно официальной документации, в версии Less 3.5+ многие случаи, ранее требующие «экранирования от кавычек», больше не нужны.

На этом всё, пока!

Пояснения:

Интерполяция позволяет использовать произвольную строку, которая хранится в переменной в качестве строковых значений.