CSS‑препроцессоры: переменные с цветами
И функции преобразования цвета
Все мы используем препроцессинг стилей. LESS, SASS, Stylus, postCSS — любые инструменты содержат возможность работы с переменными и функции преобразования цвета.
Относительно часто встает вопрос как именно работать с цветами на уровне CSS-препроцессинга. В этом коротком тексте я опишу подход, применимый для проектов «с дизайном» и «без дизайна».
Как именовать переменные с цветами
Свод рекомендаций:
- Только английские слова, без сокращений.
- Существительные, коротко и понятно. Без цифровых индексов.
- Тона серого — по уровню серого.
- Все прочие цвета — по смыслу цвета, без упоминания цвета.
- Единый способ разделять слова.
Потенциально, на простых проектах без различных тем оформления страниц, можно именовать не-серые цвета по названию цвета, то только если вероятность переделки проекта под другие цвета близка к нулю. И даже в такой ситуации это может «выстрелить в ногу», если заказчик захочет «просто поменять один из цветов» (реальная ситуация из практики).
Пример хорошего именования переменных с цветом:
// 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)
...
Цвета для проектов «с дизайном»
Есть проект с готовым дизайном и стайлгайдом, в котором прорисованы все состояния всех элементов.
- Создаём набор переменных для серых и набор переменных для не-серых цветов.
- Цветовые вариации описываем с БЭМ-нотацией цветов (фрагмент
--
как разделитель «модификатора»). - Если создаём переменные для цветов в отдельных блоках, определяем такие цвета через переменные основных цветов.
Пример набора цветовых переменных для проекта с дизайном:
// 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);
...
}
}
Если очень хочется получать точное преобразование цветов цветовыми функциями
Делать это, чаще всего, не стоит, но если ОЧЕНЬ хочется, есть два инструмента для получения цветового преобразования любого цвета:
Применять это, как мне кажется, нужно только для преобразований похожих цветов. К примеру, дизайнер прорисован кнопку, ее активное состояние, состояние наведения (все три цвета похожи, но немного отличаются яркостью, насыщенностью и тоном) — вот для таких цветов можно применить преобразования.
Заключение
Всегда старайтесь сделать настолько просто, насколько возможно. Но не проще.
Какое лично у Вас отношение к созданию переменных для цветов?