Оглавление
Less
Препроцессор CSS: переменные, вложенность, миксины, операции и функции.
1.Начало работы
- Что такое LessЧто такое препроцессор Less, как он превращает свой код в обычный CSS и где его используют сегодня.
- Установка и компиляцияКак установить Less через npm, скомпилировать файл командой lessc и перекомпилировать его при каждом сохранении через скрипты npm.
- Less и ViteКак использовать Less в проекте на Vite: установка пакета less, импорт файла .less и сборка для публикации.
2.Основы языка
- ПеременныеПеременные Less со знаком @, их область видимости и ленивое вычисление: побеждает последнее объявление.
- Вложенность и &Вложенные правила Less, ссылка на родителя & для состояний и модификаторов и медиазапросы внутри правила.
- Операции и единицыСложение, вычитание, умножение и деление в Less, работа с единицами измерения, скобки для деления и математические функции.
- Строки, экранирование и интерполяцияЭкранирование с тильдой для значений, которые Less не должен разбирать, подстановка переменных в селекторы и строки и строковые функции.
- Функции цветаВстроенные функции Less для работы с цветом: darken, lighten, fade, mix, tint, shade, spin и contrast.
3.Миксины
- МиксиныМиксины Less: класс как набор объявлений, миксин со скобками, который не попадает в CSS, и вызов с !important.
- Миксины с параметрамиПараметры миксинов Less: значения по умолчанию, именованные аргументы, точка с запятой как разделитель и переменная @arguments.
- Сопоставление с образцомНесколько миксинов с одним именем: выбор по значению аргумента, по числу аргументов и миксины с переменным числом параметров.
- Охранные выраженияУсловия в Less: when у миксинов, операторы сравнения, функции проверки типа iscolor и isnumber, default() и условия на правилах.
- Пространства имён и картыКак сгруппировать миксины в пространство имён #name и хранить настройки в картах Less с доступом по ключу @map[key].
4.Файлы и повторное использование
- Импорт файловКак разбить стили на файлы с @import и что делают параметры импорта reference, inline, once, multiple и optional.
- Расширение :extendПсевдокласс :extend в Less: как добавить селектор к чужому правилу вместо копирования объявлений, ключевое слово all и отличие от миксина.
- Отсоединённые наборы правилНабор объявлений в переменной Less, его вызов со скобками и передача блока стилей в миксин, например для медиазапросов.
- Списки и циклыСписки в Less и функции length, extract и range, циклы через рекурсивный миксин и функция each для списков и карт.
5.Less на практике
- Плагины и JavaScriptКак добавить в Less свою функцию через плагин на JavaScript, подключить готовый плагин из npm и почему встроенный JavaScript отключён по умолчанию.
- Организация проектаКак разложить стили Less по папкам, в каком порядке подключать файлы в main.less и как переопределять переменные темы.
- Less и пользовательские свойства CSSКак сочетать переменные Less с пользовательскими свойствами --name: вывод токенов в :root, тёмная тема и ограничения функций цвета.
- Переход с Less на Sass или CSSКак перевести стили с Less на Sass или на обычный CSS с пользовательскими свойствами и вложенностью: таблица соответствий и порядок работы.