Less урок 12
Less — Урок 12. Экранирование

Привет! В этом уроке немного про экранирование (Escaping), которое позволяет использовать любую произвольную строку в качестве значения свойства или переменной. Необходимо обернуть в двойные кавычки и поставить знак тильды ~ перед выражением, чтобы ~ «anything» или ~ ‘anything’ использовалось как есть, без изменений, кроме интерполяции. читать дальше…

less lesson 11
Less — Урок 11. Наследование

Привет! В этом уроке говорим о наследовании в Less, а именно о том, каким образом дочерние селекторы могут использовать свойства родительских. Для наследования существует функция extend(), через которую мы обращаемся и получаем свойства необходимого селектора. По официальной документации, extend() является псевдо-классом. Extend() В index.less напишем читать дальше…

less-lesson-10
Less — Урок 10. Операторы

Привет! В этом уроке рассмотрим, как именно Less поддерживает арифметические операции сложения (+), вычитания (-), умножения (*) и деления (/). Оказывается, их можно применять к числам, цветам или переменным, при этом учитываются единицы измерения и числа конвертируются перед выполнением операции. Примеры простых вычислений: .addition { читать дальше…

урок 9 вложенность миксинов
Урок 9. Вложенность миксинов

Привет! В прошлом уроке вложенность миксинов затрагивалась. Продолжим и начнем с наглядного примера, где вначале используем стили CSS, а потом уже Less. Пример вложенности в CSS Создаём файл index.html, в нём div с классом .block и дочерними элементами div.block-in и h1: <!DOCTYPE html> <html lang=»en»> читать дальше…

Как восстановить сайт с помощью плагина Duplicator

Привет, друг! В этой статье расскажу о плагине Duplicator, который советую для создания резервных копий сайта и миграций. По оценкам 2064 пользователей из 2165 при 15 000 000 скачиваний на сегодняшний 28 день июня 2019 года, он имеет рейтинг 5 звезд. Официальная страница плагина на читать дальше…

Урок 8. Миксины. Часть 3

Привет! В этом уроке рассмотрим ещё один пример миксина как функции и манипуляцию с переменными. Внутри миксина определяем переменную: .mixin() { @width: 30px; // переменная @width } .block { .mixin; // вызываем миксин width: @width; // берем значение переменной } Вызываем миксин в классе .block читать дальше…

Урок 7. Миксины. Часть 2

Привет! Миксин можно использовать как функцию, в которую передаются параметры. Названия параметров могут быть любыми. Создаем миксин .mixin с параметром @width: .mixin(@width) { width: @width; } Когда мы используем миксин и указываем значение, оно и будет задано, например: .block { .mixin(33%); } Здесь мы указали читать дальше…

Урок 6. Миксины. Часть 1

Привет, друг! Миксин (mix-in — примесь) — это функция, которая позволяет в одних классах использовать свойства других классов. 1. Запускаем gulp в проекте командой gulp. 2. Создаем в index.less класс .bg: .bg { background-color: #fcfcfc; } 2.1. Теперь создаем другой класс .block-text, и в нем читать дальше…

Урок 5. Переменные в Less

Привет! Сегодня говорим о переменных Less. У вас должен быть установлен Nodejs и глобально npm. Довольно часто можно видеть одно и то же значение, повторяющееся много раз по вашим таблицам стилей: a, .link { color: #428bca; } .widget { color: #fff; background: #428bca; } Переменные упрощают читать дальше…

Урок 4. Компиляция с помощью Gulp

Привет! 🙂 В прошлом уроке по Less речь шла о Компиляции на Node.js, на этот раз используем Gulp для сборки файлов. На всякий случай напомню, что предварительно должен быть установлен Nodejs и npm. Отслеживаем зависимости с packagae.json 1. Создаем папку less1.1. В консоли нужно перейти читать дальше…

Top