LESS

CSS-препроцессоры — это «программистский» подход к CSS. Они позволяют при написании стилей использовать свойственные языкам программирования приёмы и конструкции: переменные, вложенность, наследуемость, циклы, функции и математические операции. Синтаксис препроцессоров похож на обычный CSS. Код, написанный на языке препроцессора, не используется прямо в браузере, а преобразуется в чистый CSS-код с помощью специальных библиотек.

Три самых известных препроцессора — это LESS, SASS и Stylus. Они во многом похожи между собой, но имеют и ключевые различия. В этом и последующих курсах цикла мы рассмотрим препроцессор LESS.

В курсах по LESS мы будем шаг за шагом строить небольшой фреймворк компонентов. Когда он будет готов, мы сможем собирать из компонентов цельные интерфейсы. Компонентный подход позволяет структурировать большие объемы кода и легко масштабировать проекты. Препроцессор в этом деле — хорошее подспорье.

Цветовая схема — основа любого дизайна в вебе. Применяя цветовое кодирование, можно сделать интерфейс более понятным. Поэтому первым делом при создании нашего мини-фреймворка давайте займёмся цветовой схемой основных элементов интерфейса. В этой задаче LESS нам очень поможет:  @navy: #1d365d; Так в LESS описываются переменные. Синтаксис переменных такой: @название_переменной: значение_переменной; Создав переменную один раз, можно использовать её в любом месте кода. Например:

Во всех местах, где указана переменная, LESS заменит строку @navy на #1d365d. Теперь, если понадобится изменить цвет, не нужно искать все его объявления в файле, а достаточно просто изменить значение переменной в одном месте.

Переменные можно объявлять как «снаружи» правил, так и «внутри». В случае «внутреннего» объявления переменная будет доступна только внутри правила, в котором она объявлена:

Если переменная объявлена и «внутри» правила, и «снаружи» — LESS применит «внутреннее» значение.

Таким образом можно «переопределять» глобальные переменные в локальном контексте.

Итак, мы задали базовый цвет для нашей схемы, от него мы будем отталкиваться при выборе других цветов. Давайте узнаем, как это сделать.

Все цвета модели RGB можно расположить на цветовом колесе, где они плавно переходят друг в друга.

С помощью LESS-функции spin можно повернуть цветовое колесо на определённый угол относительно заданного цвета и получить новый цвет. Функция принимает два параметра, синтаксис её такой: spin(цвет, угол_поворота)

Цвет можно задавать в любом цветовом формате. Значение угла может быть как положительным, так и отрицательным. При положительном угле функция повернёт колесо по часовой стрелке, при отрицательном — против. Примеры:

Противоположный цвет на колесе называется комплементарным. Он находится под углом 180°к заданному цвету. Комплементарные цвета используют для создания контраста.

Отвлечёмся ненадолго от цвета и рассмотрим ещё одну замечательную особенность LESS — вложенные правила. Они позволяют избавиться от дублирования одинаковых названий в коде и делают его более структурированным. Например, вот такой код:

можно более кратко и без повторов написать, используя вложенность:

То есть вложенные правила просто пишутся внутри других правил. Из цепочек вложенных правил LESS сам составляет итоговые селекторы.

С помощью вложенных правил можно не только обращаться к дочерним элементам, но и составлять по частям комплексные названия классов. Например, следующий код:

можно записать проще c помощью вложенных правил:

То есть, если перед вложенным правилом поставить амперсанд &, то оно станет родственным родительскому, и LESS подставит родительский селектор вместо амперсанда.

Теперь давайте создадим третий цвет. Его «сдвинем» по кругу на 60° в другую сторону от основного. Он светлее и будет использоваться для выделения второстепенной информации и элементов.

Чтобы «сдвинуть» цвет против часовой стрелки, нужно в функцию spin передать отрицательное значение переменной @distance.

Над любыми численными значениями в LESS-коде можно произвести математические операции сложения, вычитания, умножения или деления:

LESS выполнит математическую операцию и вернёт в CSS уже вычисленное значение. Единицы измерения всегда берутся от первого параметра в выражении.

Осталось добавить ещё два цвета. Чтобы их вычислить, мы «повернём» круг на двойное расстояние @distanceот базового цвета в обе стороны.

Получившиеся цвета будут комплементарными по отношению к инфо-цвету и цвету ошибки. Это именно то, что нужно: к примеру, по смыслу цвет ошибки полностью противоположен цвету успеха, поэтому они должны быть максимально контрастны.

Из математических операций используем умножение дистанции на 2.

И теперь, когда палитра цветов построена, можно немного «поиграть» со шрифтами с базовым цветом и посмотреть, как вместе с ним будут меняться остальные.

Для этого давайте просто поменяем параметры в RGB-записи цвета в переменной @base-colorматематическими операциями. Кстати, к значению цвета «целиком» тоже можно применять операции. В случае суммы числа и RGB-записи цвета слагаемое будет прибавляться к каждому цветовому каналу одновременно:

Продолжим создавать библиотеку компонентов: с помощью цветов из разработанной палитры зададим состояния кнопок. И по ходу дела разберём другие функции LESS для работы с цветом.

Сначала зададим базовый цвет для фона кнопок и добавим его вариации по наведению и нажатию на кнопку. По наведению будем делать кнопку чуть светлее, а в момент нажатия — темнее. Для этого воспользуемся LESS-функциями lighten и darken. Их синтаксис одинаковый:

Второе значение задаётся в процентах от 0% до 100%. При задании 100% в lighten функция возвращает полностью белый цвет, а 100% для darken — полностью чёрный. То есть эти функции «смешивают» заданный цвет с белым или чёрным.

Итак, давайте зададим кнопкам нужные цвета и снова воспользуемся вложенными правилами. Чтобы задать смену цвета и для демонстрационного класса btn-hover, и для псевдокласса btn:hover, нужно прописать вложенные правила в LESS так:

Этот LESS преобразуется в следующий CSS:

Ещё две LESS-функции для работы с цветом: saturate и desaturate. Они увеличивают и уменьшают насыщенность заданного цвета. Их синтаксис такой же как и у lighten/darken:

Функцию desaturate мы используем для создания стиля «отключенной» кнопки. Совместно с desaturate воспользуемся lighten, чтобы сделать кнопку бледной и светлой. Одновременно функции цвета можно использовать так:

То есть функции можно «вкладывать» друг в друга, используя их в качестве аргументов.

Теперь перейдём к созданию цветных информационных сообщений. Они будут кодироваться теми же цветами из палитры: основным, контрастным, информационным, предупреждающим и успешным. С помощью цветовых функций и их комбинаций давайте подберём подходящие оттенки для элементов сообщений.

Фоновый цвет блоков сделаем светлее основного. Цвет границ — немного темнее и контрастнее фонового цвета. Цвет текста — ещё более темным, чем цвет фона.

Теперь создадим стили для остальных блоков сообщений.

Будем использовать те же функции, но только с другими цветами, от которых ведётся отсчёт. В этом задании переменные уже созданы, но они привязаны к базовому цвету. Нужно будет лишь заменить в функциях переменную базового цвета на переменные подходящих цветов.

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

Пример:

LESS:

CSS:

Ещё одна интересная возможность LESS — примеси. Мы можем «примешивать» содержимое одного CSS-правила в другое. Для этого нужно написать имя «примешиваемого» правила внутри другого правила. Рассмотрим пример:

Этот LESS-код скомпилируется в такой CSS:

Как мы видим, в правиле, где была «вызвана» примесь .white, появилось её содержимое.

Чтобы не выводить саму примесь в CSS, нужно после объявления примеси поставить скобки:

При применении примеси скобки писать необязательно.

К одному правилу можно применить несколько примесей одновременно. В таком случае примеси просто «вызываются» по очереди. Не забывать про точки с запятой в конце.

В примесь можно передавать параметры. Они указываются внутри скобок объявления примесей. Названия параметров начинаются с символа @. Рассмотрим пример:

Параметры позволяют сделать примеси более универсальными. Параметризованные примеси удобны, когда над разными элементами нужно провести однотипные действия с отличающимися результатами.

Параметризованные примеси можно сделать ещё универсальнее.

Параметру примеси можно задать значение по умолчанию. Оно указывается через двоеточие после названия параметра. Если в примесь при применении параметр не передаётся, то используется значение по умолчанию.

Рассмотрим пример, в котором значение параметра по умолчанию указано, но не задействуется, так как в примесь передаётся явный параметр.

В примесь можно передавать несколько параметров. Параметры перечисляются через запятую , или через точку с запятой ;. Рекомендуется использовать точку с запятой. Пример:

Иногда бывает полезным изменить поведение примеси в зависимости от передаваемых параметров. Например, у нас есть примесь, задающая размер шрифта:

Мы можем создать ещё одну примесь с таким же названием, но передать дополнительно первым параметром название шаблона этой примеси. Имя шаблона указывается первым перед параметрами самой примеси. Добавим примеси дополнительный первый параметр smaller и немного изменим принцип её работы:

Теперь можно вызывать эту примесь с названием шаблона и без него и, в зависимости от этого, получать соответствующие результаты:

Таким образом можно для схожих действий не создавать несколько примесей с разными названиями. Лучше делать шаблоны одной примеси и просто вызывать её с дополнительным параметром. (Обязательно должна существовать функция без шаблона!).

Если нужно задать общие свойства для нескольких шаблонов одной и той же примеси, можно создать универсальный шаблон:

Универсальный шаблон применяется вместе с остальными шаблонами:

В качестве имени в универсальный шаблон передаётся специальная переменная @_, за ней следуют параметры. Важно, чтобы универсальный шаблон принимал те же параметры, что и все остальные шаблоны.

В примесях можно использовать полноценные условия, которые могут изменять поведение примеси в зависимости от значений входных параметров.

Чтобы создать условие, нужно после названия примеси поставить ключевое слово when, за которым в скобках написать условную конструкцию. Пример:

Такая примесь применится, если «вызвать» её с параметром 1. В противном случае примесь не применится.

В условной конструкции допускаются следующие операторы: >, >=, =, =<, <. Также допустимо использовать встроенные функции LESS, которые возвращают конкретные значения.

К примеру, в LESS есть встроенная функция lightness, которая принимает в качестве параметра значение цвета и возвращает степень его светлоты. Чёрный цвет обладает 0%светлоты, а белый — 100%. Вот пример её использования:

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

В прошлом задании мы создали примесь, которая добавляет чёрный фон для светлого текста, но если цвет текста будет тёмным, то эта примесь не сработает и у блока совсем не будет фонового цвета.

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

Условия в примесях могут работать не только с параметрами, с которыми «вызвана» примесь, но и с переменными, объявленными вне примесей. Например, если создать примесь с условием, но без параметров:

А потом создать внешнюю переменную и вызвать где-то примесь:

То условие выполнится, созданная примесь отработает:

То есть можно управлять условиями примесей с помощью внешних переменных.

В LESS есть вcтроенные функции для проверки типа значения. Их можно применять в условиях примесей для проверки типа переданного параметра. Пример:

Все эти функции возвращают true, если переданный в них параметр соответствует проверяемому типу.

Таким образом можно создать универсальную примесь, которая в зависимости от типа переданных параметров будет работать по-разному.

Переменные можно использовать не только в значениях CSS-свойств, но и как составные части селекторов, названий свойств или как «кусочки» значений свойств. С помощью такой подстановки переменных, или Variable Interpolation, можно динамически формировать разные части CSS-правил.

Чтобы сделать подстановку значения переменной, нужно использовать фигурные скобки вокруг её имени:

Из примеров выше скомпилируется такой CSS:

Кстати, тильда ~ в примере выше нужна для хитрого механизма экранирования LESS. Без неё «склеивание» переменной и единицы измерения не сработает.

С помощью «переменных-вставок» можно формировать имена селекторов динамически в зависимости от определённых условий или в цикле.

В LESS нет специального синтаксиса для циклов. Но есть возможность вызывать примеси внутри самих себя. Так с помощью рекурсии и реализуются циклы. Рассмотрим пример:

В примере создаётся «бесконечный» цикл с увеличивающейся переменной-счётчиком, который никогда не закончится. Чтобы рекурсия всё таки когда-нибудь прекращалась, к примеси добавляется условие выполнения:

Теперь цикл выполнится два раза, сработает условие выполнения примеси и произойдёт выход из рекурсии.

Для чего можно применять циклы? Например, для генерирования целых CSS-правил. Если в цикле в имени селектора использовать переменную-вставку, то можно на выходе получить набор правил с разными селекторами. В примере ниже цикл исполняется три раза, в каждой итерации создастся правило с переменной-счётчиком @n в качестве суффикса селектора:

Внутри «цикла» переменную-счётчик можно использовать не только в условиях или в селекторах, но и в значениях свойств.

В этом задании мы раскрасим монстров в разные цвета в цикле с помощью функции spin, которая рассматривалась в задании первой части курса по LESS.

Давайте подставим в качестве аргумента функции spin переменную-счётчик @n, увеличенную в несколько раз.

С помощью примесей и небольших вычислений можно красиво и быстро создать «вертикальный ритм» текста с заголовками, параграфами и списками. Мы уже немного рассказывали про «вертикальный ритм» в задании курса «Оформление текста с помощью CSS». В этой серии рассмотрим другой подход.

Основу для вертикального ритма будет задавать переменная @line, в которой хранится высота одной «визуальной» строки текста. Крупные блоки текста, например, заголовки первого уровня h1 будут занимать три «визуальные» строки. Заголовки h2 и h3 будут занимать две строки. Обычный текст в параграфах будет однострочным. Размер шрифта при этом подберём так, чтобы текст при заданной высоте строки смотрелся гармонично.

Между блоками текста (заголовками, параграфами, списками) нужно установить соразмерный отступ. По умолчанию сделаем его равным @line.

Итак, в деле нам пригодятся две примеси: .set-font, которая устанавливает размер шрифта и высоту строки, и .set-margin для задания вертикальных отступов.

В примеси .set-font для высоты строки и в .set-margin для верхнего и нижнего отступа зададим значение по умолчанию @line.

Для наглядности мы добавили на страницу вертикальную «сетку», шаг которой тоже зависит от @line. В итоге все блоки текста должны будут «идти в ритм» с вертикальной сеткой.

Далее займёмся параграфами и списками.

Для параграфов немного уменьшим размер шрифта относительно @line.

Для списка просто добавим стандартные вертикальные отступы.

А для элементов списка тоже немного уменьшим шрифт, как у параграфов, и зададим вертикальные отступы в половину величины @line

Когда значения размера шрифта, высоты строки и отступов будут заданы, можно легко управлять всеми величинами с помощью одной переменной @line. При этом «вертикальный ритм» будет сохраняться.

Отсюда следует основное предназначение примесей — выделять повторяющийся код в отдельные блоки для последующего использования. Чем меньше дублируется код, тем его меньше. А чем меньше кода, тем ниже вероятность ошибок в нём. Профит!

 

Дальше мы рассмотрим несколько полезных примесей, которые могут часто использоваться в повседневной практике.

Одна из самых распространённых задач — горизонтальное и вертикальное выравнивание блока относительно родительского контейнера.

В этом задании давайте создадим примесь для быстрого выравнивания. Особенности этого метода:

• блок позиционируется абсолютно внутри относительно спозиционированного контейнера,
• у блока должны быть фиксированные ширина и высота,
• центровка происходит за счёт нулевых координат top, right, bottom, left и автоматических внешних отступов.

Ещё одна распространённая задача — реализовать блок треугольной формы с помощью CSS. Для её решения подходит управление шириной и цветом рамок.

Универсальную примесь для создания «треугольников» на CSS удобно держать в своём арсенале наготове, чтобы при необходимости просто написать одну строчку кода, не вспоминая подробности реализации. Итак, нам нужна примесь, которая будет принимать в качестве параметров: направление, в которое «смотрит» треугольник, его размер и цвет.

Так как в примеси нужно учесть четыре направления (вверх, вправо, вниз и влево), уместно будет воспользоваться шаблонами примесей. В универсальном шаблоне будут заданы общие для всех сторон свойства, а в специфичных шаблонах — разные.

В задании в LESS-код уже добавлена универсальная примесь .triangle, в которой заданы правила для всех «треугольников»: нулевые ширина и высота (так как мы будем работать с рамками, сами блоки будут невидимы), а также сплошной стиль рамки.

Давайте применим примесь к блоку и зададим оставшиеся параметры рамки — цвет и толщину.

Следующим шагом сделаем шаблон примеси для «треугольника», направленного вверх. Напомним, что к .triangle-box мы уже применили примесь с шаблоном top:

Теперь создадим сам шаблон top примеси .triangle. В нём левой и правой рамке зададим прозрачный цвет, а верхнюю часть рамки уберём, чтобы она не занимала место.