Less - урок 15
Less — Урок 15. Встроенные функции

Привет! Среди встроенных функций Less, чаще всего используются функции управления цветом, их и рассмотрим в последнем уроке Less. Данные функции обычно принимают параметры в тех же единицах, что и изменяемые ими значения, а проценты обрабатываются как абсолютные значения, которые привязаны к своим допустимым диапазонам. Color читать дальше…

Урок 14 Импорты
Less — Урок 14. Импорты

Привет! Это конспект урока по импортам в Less. Импорт нужен для доступа одного файла, например index.less, к данным / переменным другого файла, допустим, из new.less. Опционально расширение указывается для less файлов, т.е. если не указываем расширение, компилятор воспринимает импортируемый файл как less файл. Импорт less читать дальше…

урок 13 Less
Less — Урок 13. Циклы

Привет! В Less нет синтаксиса для циклов, но их можно сымитировать с помощью рекурсии.Рекурсия – это когда вызывается функция или миксин из самой себя. В Less для рекурсии можно использовать миксины. Создаем класс test, в котором используем миксин loop с передаваемым значением (5): .test { читать дальше…

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»> читать дальше…

Урок 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, и в нем читать дальше…

Top