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

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

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

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

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

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

@color-1: #0074d9;
@color-2: lighten(@color-1, 25%);
@color-3: #ff4136;
@color-4: desaturate(@color-5, 30%);
@color-5: #2ecc40;
@color-6: spin(@color-3, -100%);
@color-7: #ffdc00;
@color-8: darken(@color-7, 15%);
@color-9: darken(@color-6, 20%);

.color-1 {
  background-color: @color-1;
}

.color-2 {
  background-color: @color-2;
}

.color-3 {
  background-color: @color-3;
}

.color-4 {
  background-color: @color-4;
}

.color-5 {
  background-color: @color-5;
}

.color-6 {
  background-color: @color-6;
}

.color-7 {
  background-color: @color-7;
}

.color-8 {
  background-color: @color-8;
}

.color-9 {
  background-color: @color-9;
}

До встречи в следующих частях по Less!