Именование переменных цвета в SASS

Question

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

Я знаю, что названия цветов плохие. Такие как:

$blue 
$red 
$green 

Но я не видел альтернативы. Я борюсь за имена переменных для цветов на сайте, которые передают смысл.

Любые идеи?

Answer 1

В моем личном опыте наиболее полезный способ назвать цвета, чтобы сделать это в отношении функции цветовом, таких как

• $ фоне
• $ контрастного
• $ текста
• $ кроме
• $ ссылка

И так далее. Конечно, цвета и имя могут зависеть от дизайна.

Тогда вы можете иметь различные и обмениваемых цветовые схемы, определенные на различных стилей, таких как:

• _dark_scheme.scss
• _light_scheme.scss
• _pastels.scss

Идея здесь вы можете использовать одни и те же цветовые переменные в своих основных таблицах стилей и не зависеть от конкретных цветов.

Answer 2

Я нашел еще одну идею в "SASS & Color Variables" article. Решение, предлагаемого Сашого Greif является использовать некоторые переменные для хранения описательных названий цветов, а также некоторые другие, чтобы назначить эти цвета к их функциям:

// first we set descriptive variables: 
$darkgrey: #333333; 
$blue: #001eff; 

// then we set functional variables: 
$text_color: $darkgrey; 
$link_color: $lightblue; 
$border_color: $lightblue; 

.myClass { 
    color: $text_color; 
    border-color: $border_color; 
} 

a { 
    color: $link_color; 
} 

Я только начиная с SASS и не знать, какое подход более практичен, но мне нравится, как он отделяет цвета от их функции.

Answer 3

Мне нравится идея объединения generic to specific naming (подходит для завершения кода) и description/functional naming. Так что у вас есть что-то вроде этого:

// Descriptive naming 
$color-gray-light: #f3f3f3; 
$color-gray-dark: #999999; 
$color-red: red; 

// Functional naming 
$link-color: $color-red; 
$link-border-color: $color-gray-light; 

Answer 4

Вы можете даже создать подмешать для серых оттенков (в примере RGBA используется для прозрачности, например, черный на красном фоне будет более заметным, если это 80% прозрачный черный а не темно-серый).

@mixin grey($intensity: 0.5, $type: color) { 
    #{$type}: rgba(black, $intensity); 
} 
.i-am-50-percent-gray { 
    @include grey(0.5, color); 
} 

Дайте результат

.i-am-50-percent-gray { 
    color: rgba(0, 0, 0, 0.5); 
}