Вставка переменной в инлайновое изображение в 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

Апрель 4, 2019 г.

Функции вроде concat у less нет, но есть возможность подстановки переменных в строковою константу. Этим мы и воспользуемся. Начну с примера, чтобы показать некоторые нюансы. Допустим, мы хотим задать выражение вроде: [crayon-5dce1964255e9554635589/] ...

Читать

 

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

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



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