×

Введение [1/14]

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

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

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

В этой серии курсов редактор CSS заменён на редактор LESS. Чтобы увидеть скомпилированный из LESS кода CSS код, можете использовать кнопку CSS.

Итак, теперь вы знаете всё, чтобы начать!

---

1. Цель 1 Удалите символы /* и */ в редакторе LESS.

×

Переменные, шаг 1 [2/14]

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

В прошлом задании в коде встречалась подобная запись:

@navy: #1d365d;

Так в LESS описываются переменные. Синтаксис переменных такой:

@название_переменной: значение_переменной;

Создав переменную один раз, можно использовать её в любом месте кода. Например:

background-color: @navy;
color: @navy;
border-color: @navy;

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

Попробуем использовать переменные в коде: зададим с помощью переменной основной цвет нашей цветовой схемы.

---

1. Цель 1 Задайте переменной @base-color на первой строке значение rgb(110, 27, 255).

×

Переменные, шаг 2 [3/14]

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

.rule-1 {
    @align: right;
    text-align: @align; // text-align задаётся значение right
}
.rule-2 {
    text-align: @align; // в этом месте произойдёт ошибка
}

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

@align: left;

.rule-1 {
    @align: right;
    text-align: @align; // text-align задаётся значение right
}
.rule-2 {
    text-align: @align; // text-align задаётся значение left
}

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

Проверим это на практике.

---

1. Цель 1 Внутрь правила .color-primary добавьте переменную @base-color и задайте ей значение red .

×

Цветовые функции, шаг 1 [4/14]

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

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

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

spin(цвет, угол_поворота)

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

color: spin(red, 90); // цвет повернётся от красного на 90° по часовой
border-color: spin(#f0f, -45); // цвет на 45° от #f0f против часовой

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

Наш основной цвет находится в сине-фиолетовой области цветового круга. Давайте для него вычислим комплементарный цвет с помощью функции spin.

---

1. Цель 1 Переменной @distance задайте значение 180.

×

Вложенные правила, шаг 1 [5/14]

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

.super-class-name {
    color: #ffffff;
}
.super-class-name a {
    text-decoration: none;
}
.super-class-name a span {
    font-size: 1em;
}

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

.super-class-name {
    color: #ffffff;
    a {
        text-decoration: none;
        span {
            font-size: 1em;
        }
    }
}

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

Попробуем написать вложенное правило.

---

1. Цель 1 Блокам .palette-item задайте свойство display со значением inline-block.
2. Цель 2 Затем внутри правила .palette-item создайте вложенное правило, в котором для .color обнулите значение border-radius.

×

Вложенные правила, шаг 2 [6/14]

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

.super-button-red {
    color: red;
}
.super-button-blue {
    color: blue;
}

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

.super-button {
    &-red { color: red; }
    &-blue { color: blue; }
}

---

1. Цель 1 Переменной @distance задайте значение 60.
   Значение переменной @error-color вычислите с помощью функции spin, повернув базовый цвет @base-color на величину @distance.

×

Математические операции, шаг 1 [7/14]

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

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

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

padding-top: 10px + 20; // = 30px
padding-bottom: 100px - 50; // = 50px
font-size: 2em * 2; // = 4em
left: 50% / 2; // 25%

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

Чтобы вычислить отрицательное значение @distance просто умножим переменную на -1.

---

1. Цель 1 Cоздайте внутри правила .color вложенное правило &-info. В нём для background-color задайте переменную @info-color.
2. Цель 2 Затем переменной @invert-distance задайте значение @distance * -1. Значение @info-color вычислите с помощью spin, повернув базовый цвет @base-color на величину @invert-distance.

×

Математические операции, шаг 2 [8/14]

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

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

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

Давайте же завершим нашу палитру.

---

1. Цель 1 Значение переменной @warning-color вычислите функцией spin: поверните базовый цвет @base-color на двойную величину @distance.
2. Цель 2 Значение переменной @success-color вычислите функцией spin: поверните базовый цвет @base-color на двойную величину @invert-distance.

×

Математические операции, шаг 3 [9/14]

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

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

rgb(10, 10, 10) + 10

// то же самое, что

rgb(20, 20, 20)

---

1. Цель 1 Первый RGB-параметр 110 базового цвета @base-color замените на 110 + 50,
2. Цель 2 второй RGB-параметр умножьте на 2,
3. Цель 3 от третьего RGB-параметра отнимите 30,
4. Цель 4 а затем прибавьте 20 к RGB-записи цвета, чтобы получилось rgb(…) + 20 .

×

Цветовые функции, шаг 2 [10/14]

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

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

color: lighten(red, 50%); // светлее red на 50%
color: darken(blue, 25%); // темнее blue на 25%

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

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

.btn {
    &-hover,
    &:hover {
        color: red;
    }
}

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

.btn-hover,
.btn:hover {
    color: red;
}

---

×

Цветовые функции, шаг 3 [11/14]

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

color: saturate(green, 20%); // green насыщеннее на 20%
color: desaturate(blue, 50%); // blue бледнее на 50%

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

// цвет светлее красного на 50% и насыщеннее на 20%
color: saturate(lighten(red, 50%), 20%);

//цвет темнее синего на 20% и бледнее на 50%
color: desaturate(darken(blue, 20%), 50%);

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

---

1. Цель 1 Внутри правила &-primary кнопки .btn создайте вложенное правило &-disabled, в котором задайте цвет текста rgba(255, 255, 255, 0.8) и цвет фона светлее @base-color на 20%.
2. Цель 2 Затем уменьшите насыщенность получившегося цвета фона с помощью функции desaturate на 70%.

×

Цветовые функции, шаг 4 [12/14]

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

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

Воспользуемся уже известными нам функциями lighten, darken, spin и их комбинациями.

---

1. Цель 1 Задайте переменной @alert-primary-bg цвет светлее базового на 35%.
2. Цель 2 Задайте переменной @alert-primary-border значение, сдвинутое от @alert-primary-bg функцией spin на -10 и затемнённое на 5%.
3. Цель 3 Задайте переменной @alert-primary-text цвет темнее @alert-primary-bg на 50%.

×

Цветовые функции, шаг 5 [13/14]

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

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

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

---

1. Цель 1 Замените переменную @base-color на @error-color в функции для расчёта @alert-error-bg (15 строка).
2. Цель 2 Замените переменную @base-color на @info-color в функции для расчёта @alert-info-bg (19 строка).
3. Цель 3 Замените переменную @base-color на @warning-color в функции для расчёта @alert-warning-bg (23 строка).

×

Испытание: палитра [14/14]

Итак, мы разобрались как создать палитру цветов, основанную на цветовом кодировании. На основе разработанной палитры можно оформить цветом любой элемент интерфейса. При этом цвета всех элементов будут консистентны и их можно легко конфигурировать.

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

А напоследок осталась небольшая головоломка. Вам нужно раскрасить белые квадраты.

В раскрашенных квадратах есть стрелки, которые указывают на соседние пустые квадраты. Это подсказка: цвет для пустого квадрата рассчитывается от цвета указывающего на него квадрата.

Для вычисления цвета используйте цветовые функции, рассмотренные в курсе: lighten, desaturate, darken, spin. Числовые параметры функций кратны 5.

До встречи на следующих курсах по LESS!

---