CSS‑препроцессоры: переменные с цветами

И функции преобразования цвета

Все мы используем препроцессинг стилей. LESS, SASS, Stylus, postCSS — любые инструменты содержат возможность работы с переменными и функции преобразования цвета.

Относительно часто встает вопрос как именно работать с цветами на уровне CSS-препроцессинга. В этом коротком тексте я опишу подход, применимый для проектов «с дизайном» и «без дизайна».

Как именовать переменные с цветами

Свод рекомендаций:

  1. Только английские слова, без сокращений.
  2. Существительные, коротко и понятно. Без цифровых индексов.
  3. Тона серого — по уровню серого.
  4. Все прочие цвета — по смыслу цвета, без упоминания цвета.
  5. Единый способ разделять слова.

Потенциально, на простых проектах без различных тем оформления страниц, можно именовать не-серые цвета по названию цвета, то только если вероятность переделки проекта под другие цвета близка к нулю. И даже в такой ситуации это может «выстрелить в ногу», если заказчик захочет «просто поменять один из цветов» (реальная ситуация из практики).

Пример хорошего именования переменных с цветом:

// LESS

@gray-light:      #DDDDDD;
@gray:            #808080;
@gray-dark:       #585858;
@gray-darken:     #333333;

@color-main:      #01579B; // основной цвет
@color-secondary: #FFEB3B; // дополнительный цвет
@color-danger:    #D41131; // цвет ошибки, опасного действия
@color-success:   #3FD411; // цвет подтверждения, удачного завершения операции
@color-warning:   #D8AE1C; // цвет информационного сообщения

Пример плохого именования цветов:

// LESS
// Это ПЛОХОЙ ПРИМЕР, не делайте так

// Отсутствие выравнивания, разные разделители слов, бессмысленные цифровые индексы
@gray1: #ddd;
@gray02: #808080;
@gray-second:#585858;
@grayFirst:       #333333;

@siniy: #01579B;
@secondary: #FFEB3B;
@red:  #D41131;
@green:   #3FD411;
@orange:#D8AE1C;

Что отличает код профессионала от кода начинающего? Краткость, понятность, быстрая читаемость, хорошая масштабируемость.

Все ли цвета выносить в переменные

Для всех проектов («с дизайном») крупнее сайта-визитки — да, лучше все цвета иметь в переменных.

В случае работы по дизайну, выполненному не веб-дизайнером (уйма никак не связанных друг с другом цветов, множество похожих вариаций одного цвета), допустимо именовать цвета по их названию, подбирая названия с помощью одного из сервисов:

Что если серых цветов более семи

В моих проектах редко встречается ситуация, когда серых — более семи и мне недостаточно переменной с серым и модификаторов light, lighten, lightest, dark, darken, darkest. Если приходится сталкиваться с подобным, использую добавление к слову «gray» цифрового индекса, показывающего яркость по RGB:

// LESS

@gray-50:  #323232; // rgb(50, 50, 50)
@gray-110: #6e6e6e; // rgb(110, 110, 110)
...

Цвета для проектов «с дизайном»

Есть проект с готовым дизайном и стайлгайдом, в котором прорисованы все состояния всех элементов.

  1. Создаём набор переменных для серых и набор переменных для не-серых цветов.
  2. Цветовые вариации описываем с БЭМ-нотацией цветов (фрагмент -- как разделитель «модификатора»).
  3. Если создаём переменные для цветов в отдельных блоках, определяем такие цвета через переменные основных цветов.

Пример набора цветовых переменных для проекта с дизайном:

// LESS

// Общие семантические цвета
@gray--lighten:        #DCDCDC;
@gray--light:          #BABABA;
@gray:                 #808080;
@gray--dark:           #585858;
@gray--darken:         #333333;

// На примере вариаций одного главного цвета
@color-main--lightest: #CBF3BF;
@color-main--lighten:  #ACEF97;
@color-main--light:    #74EA4F;
@color-main:           #3FD411;
@color-main--dark:     #39BA11;
@color-main--darken:   #329F11;
@color-main--darkest:  #184B09;

// Цвета главной кнопки
@btn-main-bg:          @color-success;
@btn-main-color:       @color-success--darken;
@btn-main-border:      @color-success--darken;

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

Цвета для проектов «без дизайна»

Если Вы «сами себе злобный буратино дизайнер» и/или верстаете собственный фреймворк, имеет смысл выбрать несколько базовых цветов и все их вариации получать простым цветовым преобразованием.

// Файл с переменными:

@gray-light:      #DDDDDD;
@gray:            #808080;
@gray-dark:       #585858;
@gray-darken:     #333333;

@color-main:      #01579B; // основной цвет
@color-secondary: #FFEB3B; // дополнительный цвет
@color-danger:    #D41131; // цвет ошибки, опасного действия
@color-success:   #3FD411; // цвет подтверждения, удачного завершения операции
@color-warning:   #D8AE1C; // цвет информационного сообщения

// Пример использования в файле стилизации кнопок:

.btn {
  background-color: @color-main;
  color: darken(@color-main, 20%);
  ...

  &:hover {
    background-color: darken(@color-main);
    ...
  }
}

Если очень хочется получать точное преобразование цветов цветовыми функциями

Делать это, чаще всего, не стоит, но если ОЧЕНЬ хочется, есть два инструмента для получения цветового преобразования любого цвета:

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

Заключение

Всегда старайтесь сделать настолько просто, насколько возможно. Но не проще.

Какое лично у Вас отношение к созданию переменных для цветов?