Color Alchemy with Less: создание цветовых схем и палитр

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

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

Создание цветовых схем

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

@base-color: #00ff00;
@triad-secondary: spin(@base-color, 120);
@triad-tertiary: spin(@base-color, -120);

Этот метод использует переменные и функцию spin() Это прекрасно работает, но для меня это не особенно многоразового использования и не достаточно гибким. К счастью, проблему можно решить с помощью миксинов. Посмотрим, что я имею в виду.

 .analog(@color, @variant, @property) {
  @first: spin(@color, 30);
  @second: spin(@color, -30);
  @list: @first, @second;
  @return: extract(@list, @variant);
  @{property}: @return;
}

.triad(@color, @variant, @property) {
  @first: spin(@color, 120);
  @second: spin(@color, -120);
  @list: @first, @second;
  @return: extract(@list, @variant);
  @{property}: @return;
}

.quad(@color, @variant, @property) {
  @first: spin(@color, 90);
  @second: spin(@color, -90);
  @third: spin(@color, 180);
  @list: @first, @second, @third;
  @return: extract(@list, @variant);
  @{property}: @return;
}

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

.quad() Первый устанавливает базовый цвет для схемы. Второй говорит миксину, какой цветовой вариант вернуть. И третий определяет, какое свойство CSS использовать, когда Less компилирует код. Внутри тела миксина функция spin() Функция extract() И, наконец, с помощью интерполяции переменных цветовой вариант назначается определенному свойству CSS.

Теперь мы можем поместить приведенный выше код в отдельный файл с именем color_schemes.less

 @import "color_schemes.less";

@base-color: #00ff00; 

div {
  width: 200px;
  height: 100px;
  border: thick solid;
  .quad(@base-color, 3, border-color);
  .quad(@base-color, 2, color);
  .quad(@base-color, 1, background-color);
}

Здесь мы импортируем файл с цветовыми схемами, а затем определяем основной цвет для нашего веб-сайта или приложения. Последние три строки в наборе правил divborder-colorcolorbackground-color

Как видите, миксин можно использовать с любым свойством, ожидаемое значение которого — цвет. Кроме того, очень легко увидеть, для какого свойства используется конкретный оператор; просто посмотрите на конец, и бум, мы это знаем. Например, в последнем утверждении вы можете ясно видеть, что первый вариант цвета четырехугольной схемы будет использоваться в качестве значения свойства background-color Довольно круто, а?

И вот скомпилированный вывод:

 div {
  /* ... etc... */
  border-color: #ff00ff;
  color: #ff8000;
  background-color: #007fff;
}

 .color-palette(@color, @swatches, @step, @index: 0) when (@index =< (@swatches - 1)) {

  .swatch-@{index} {
    background-color: spin(@color, (@index * @step));
  }
  .color-palette(@color, @swatches, @step, (@index + 1));
}

.color-palette(#ff0000, 25, 15);

 .swatch-0 {
  background-color: #ff0000;
}

.swatch-1 {
  background-color: #ff4000;
}

/* ...etc... */

.swatch-23 {
  background-color: #ff0040;
}
.swatch-24 {
  background-color: #ff0000;
}

 .color-palette(@type, @color, @index: 0) when (@index =< 9) {
  & when (@type = 'tints') {
    .swatch-@{index} {
      background-color: lighten(@color, (@index * 10%), relative);
    }
  }
  & when (@type = 'shades') {
    .swatch-@{index} {
      background-color: darken(@color, (@index * 10%), relative);
    }
  }
  .color-palette(@type, @color, (@index + 1));
}

.color-palette('shades', #ff00ff);

 .swatch-0 {
  background-color: #ff00ff;
}
.swatch-1 {
  background-color: #e600e5;
}

/* ...etc... */

.swatch-9 {
  background-color: #190019;
}