Когда я впервые попробовал Sass на проекте, первое, что я захотел сделать, — создать переменные для всех цветов. Я уже знал, что следует избегать имен, подобных .header-blue-left-bottom, потому что цвет и положение этого элемента могут измениться. Лучше делать упор на сущность вещей, нежели на их внешний вид.
Поэтому я попытался сделать имена цветов семантическими:
$mainBrandColor: #F060D6;
$secondaryFocus: #4C9FEB;
$fadedHighlight: #F1F3F4;Но очень быстро я обнаружил, что не могу их запомнить. Приходилось постоянно подсматривать туда, где я их определил. Это быстро надоело и я вернулся к привычному виду:
$orange: #F060D6;
$red: #BB532E;
$blue: #4C9FEB;
$gray-1: #eee;
$gray-2: #ccc;
$gray-3: #555;Это гораздо более интуитивное представление, если, конечно, не считать некоторых негативных побочных эффектов. Но в конце концов, все это находится в CSS и предназначено только для разработчиков, так что проблема не такая уж и большая.
Также я пытался хранить цвета в мапе:
$colors: (
light: #ccc,
dark: #333
);Но единственная определенная цель такой структуры — очищение глобального пространства имен. Вероятно, это не стоит хлопот, связанных с необходимостью все время получать цвет из мапа (map-get). Пространства имен, такие как $-c-orange, вероятно, более простой подход для этого.
Большей частью я придерживаюсь этого подхода в Sass (просто-используй-названия-цветов). Он также прекрасно может существовать в виде пользовательских свойств CSS:
:root {
-c-orange: #F060D6;
-c-red: #BB532E;
-c-blue: #4C9FEB;
-c-gray-1: #eee;
-c-gray-2: #ccc;
-c-gray-3: #555;
}Можно добавить немного больше конкретики, сохраняя при этом абстрактность, как советует Marcus Ortense:
$color-primary:
$color-primary-dark:
$color-primary-light:А вот подход Mike Street с базовыми цветами и их вариациями:
$primary:
$primaryLight:
$primaryDark:
$secondary:
$secondaryLight:
$secondaryDark:
$neutralDarker:
$neutrayDark:
$neutral:
$neutralLight:
$neutralLighter:
$neutralLightest:Недавно Silvestar Bistrović писал об использовании абстрактной греческой нумерации:
$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;Я раньше использовал такой подход для медиа-запросов, так как нумерация, похоже, имеет смысл (маленькие числа — это маленькие экраны, большие числа — большие экраны). Это удобно для оттенков цвета, почему бы и с обычными числами не попробовать?
Еще один популярный подход — совмещение имени цвета с абстрактными именами. Так делает Geoff и John Carroll:
$color-danube: #668DD1;
$color-cornflower: $6195ED;
$color-east-bay: $3A4D6E;
// theme1.scss
$color-alpha: $color-danube;
$color-bravo: $color-cornflower;
$color-charlie: $color-east-bay;
// theme2.scss
$color-alpha: $color-cornflower;
$color-bravo: $color-danube;
$color-charlie: $color-east-bay;Вы можете сами определить необходимую степень подробности и даже добавить варианты вне палитры:
$table-row-background: lighten($color-background, 10%);Stuart Robson даже добавляет немного БЭМа:
$ns-color__blue—dark: rgb(25,25,112);
$ns-brand__color—primary: $ns-color__blue—dark;
// component.scss
$ns-component__color—text: $ns-brand__color—primary;В Material Desing используются значения, которые похожи на font-weight! У вас есть базовый диапазон цветов + некоторые альтернативы:
$light-green-100:
$light-green-200:
$light-green-300:
// etc
$light-green-900:
$light-green-A200:
$light-green-A400:
$deep-purple-100:
$deep-purple-200:
$deep-purple-300:
// etc
$deep-purple-A900:
А как вы выбираете имена для переменных цветов?
Полезные ссылки
Если вы получаете удовольствие, отделяя солнечно-желтый цвет (sunny yellow) от подсолнечно-желтого (sunflower yellow), то загляните сюда или сюда:
See the Pen Color Namer by Maneesh (@maneeshc) on CodePen.
Существует даже плагин Sublime Text для преобразования форматов цветов в любой синтаксис:
0 комментариев