Less — Урок 12. Экранирование
10.08.2019
1 144
Привет! В этом уроке немного про экранирование (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)"; // экранируем
}
экранирование в Less (escaping)
Сейчас уже поддерживается 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+ многие случаи, ранее требующие «экранирования от кавычек», больше не нужны.
На этом всё, пока!
Пояснения:
Интерполяция позволяет использовать произвольную строку, которая хранится в переменной в качестве строковых значений.
Голосов: 0, Средняя оценка: 0