о разработке сайтов, WordPress, 1С-Битрикс и немного о жизни
Привет! В этом уроке рассмотрим, как именно Less поддерживает арифметические операции сложения (+), вычитания (-), умножения (*) и деления (/). Оказывается, их можно применять к числам, цветам или переменным, при этом учитываются единицы измерения и числа конвертируются перед выполнением операции. Примеры простых вычислений: .addition { читать дальше…
Привет! В прошлом уроке вложенность миксинов затрагивалась. Продолжим и начнем с наглядного примера, где вначале используем стили CSS, а потом уже Less. Пример вложенности в CSS Создаём файл index.html, в нём div с классом .block и дочерними элементами div.block-in и h1: <!DOCTYPE html> <html lang=»en»> читать дальше…
Привет, друг! В этой статье расскажу о плагине Duplicator, который советую для создания резервных копий сайта и миграций. По оценкам 2064 пользователей из 2165 при 15 000 000 скачиваний на сегодняшний 28 день июня 2019 года, он имеет рейтинг 5 звезд. Официальная страница плагина на читать дальше…
Привет! В этом уроке рассмотрим ещё один пример миксина как функции и манипуляцию с переменными. Внутри миксина определяем переменную: .mixin() { @width: 30px; // переменная @width } .block { .mixin; // вызываем миксин width: @width; // берем значение переменной } Вызываем миксин в классе .block читать дальше…
Привет! Миксин можно использовать как функцию, в которую передаются параметры. Названия параметров могут быть любыми. Создаем миксин .mixin с параметром @width: .mixin(@width) { width: @width; } Когда мы используем миксин и указываем значение, оно и будет задано, например: .block { .mixin(33%); } Здесь мы указали читать дальше…
Привет, друг! Миксин (mix-in — примесь) — это функция, которая позволяет в одних классах использовать свойства других классов. 1. Запускаем gulp в проекте командой gulp. 2. Создаем в index.less класс .bg: .bg { background-color: #fcfcfc; } 2.1. Теперь создаем другой класс .block-text, и в нем читать дальше…
Привет! Сегодня говорим о переменных Less. У вас должен быть установлен Nodejs и глобально npm. Довольно часто можно видеть одно и то же значение, повторяющееся много раз по вашим таблицам стилей: a, .link { color: #428bca; } .widget { color: #fff; background: #428bca; } Переменные упрощают читать дальше…
Привет! 🙂 В прошлом уроке по Less речь шла о Компиляции на Node.js, на этот раз используем Gulp для сборки файлов. На всякий случай напомню, что предварительно должен быть установлен Nodejs и npm. Отслеживаем зависимости с packagae.json 1. Создаем папку less1.1. В консоли нужно перейти читать дальше…
Привет! В этом уроке сделаем компилятор на Node.js. Напомню, что Node.js должен быть установлен, в чём вам поможет статья Как установить Node.js и проверить его работу. 1. Создаем папку less Устанавливаем в неё пакет less через командную строку Windows или Open Server: 1.1. Команда: npm читать дальше…
Привет! В этом уроке рассказываю о том, как сделать компиляцию LESS на клиенте, что означает — непосредственно в браузере. Вариант 1. Компиляция LESS через консоль 1. Создаём папку, допустим, по названию урока, less 1.1. Устанавливаем плагин LESS в папку проекта, локально, с помощью команды в консоли: читать дальше…