Вставка переменной в инлайновое изображение в LESS

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS.

К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы хотите, чтобы цвет векторной иконки тоже поменялся согласно палитре брендовых цветов.

Но давайте обо всем по порядку.

У нас есть SVG изображение, к примеру иконка увеличительного стекла для кнопки поиска на сайте:

Используя один из онлайн сервисов преобразования картинок в инлайн CSS (а я использовал вот этот — https://websemantics.uk/tools/svg-to-background-image-conversion/), получаем примерно следующий код (я опускаю данные многоугольника) :

Допустим далее, что в вашем less шаблоне определена переменная, задающая брендовый (основной) цвет для всего шаблона:

Было бы удачно подставить его в SVG картинку, чтобы при изменении переменной и цвет картинки тоже менялся. Тут нам пригодиться сложение строк, описанное здесь.

Но есть две небольшие особенности:

  • кавычки, обрамляющие «data:image/…» — часть строки;
  • значение цвета нужно преобразовать, используя urlencode.

Для это вводим две переменные в LESS:

Теперь можно выполнить все подстановки, в код SVG изображения:

Написать комментарий

Мало букафф? Читайте есчо !

Скрипт слежения за изменениями в less файлах

Декабрь 2, 2018 г.

Lessc не имеет ключа 'слежения', чтобы выполнять перекомпиляцию при изменении less файлов проекта, как например это сделано у sass компилятора. Это весьма не удобно на этапе верстки шаблона из макета. Для отслеживания я установил UNIX утилиту inotify. ...

Читать

Подключаем LESS препроцессор к вашей теме в Wordpress

Июнь 2, 2019 г.

Вкусив однажды всех радостей от использования препроцессора, сложно себя заставить работать с нативным CSS. Посмотрим как подключить LESS к вашей теме на WP. Т.к. уже есть готовые решения, то воспользуемся одним из них. Плагин WP-LESS сделает большую ...

Читать

 

Комментарии к «Вставка переменной в инлайновое изображение в LESS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: