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

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

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

Теперь все LESS файлы, добавляемые функцией wp_enqueue_style, будут автоматически обрабатываться препроцессором.

Если стили вашей темы добавляются с помощью этой функции, то нужно лишь переименовать файлы стилей (изменить расширение на *.less) и соответственно поменять имя файлов в коде.

Но если файлы подключаются через тег link (вроде следующего):

в шаблоне (делается это обычно в файле header.php), то следует убрать этот тег из шаблона, заменив его аналогичным вызовом функции wp_enqueue_style.

Примерно вот так (код для файла functions.php):

Обратите внимание, что WP требует для правильной работы файл style.css в корневой папке темы. В начале файла содержится специальный дескриптор в виде комментария:

Создав копию style.less, этот дескриптор в style.css нужно сохранить, а всё остальное можно убрать.

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

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

Сложение строк в LESS

Апрель 4, 2019 г.

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

Читать

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

Август 29, 2019 г.

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

Читать

 

Комментарии к «Подключаем LESS препроцессор к вашей теме в WordPress»

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



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