Работа с цветовой схемой в Sass

Многие сайты имеют конкретную цветовую схему для каждого раздела. Даже тот самый сайт, который вы читаете, делает это — вы находитесь в синем разделе AKA CSS . Это умная тенденция дизайна для создания четких различий между различными частями одного и того же объекта.

Но с технической стороны это может быть трудной задачей. Не потому, что это слишком сложно, а скорее потому, что в нем много раздражающих повторений.

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

Как работают цветовые схемы?

Прежде чем перейти к коду, мы должны спросить, как на самом деле работает цветовая схема в CSS ? Что ж, если вы не планируете использовать какой-либо JavaScript (что звучит для меня хорошей идеей), возможно, самый простой способ — создать класс тем в вашем HTML и CSS, чтобы каждый элемент, который нужно стилизовать в соответствии с тема становится ребенком этого класса .

SitePoint следует этому методу. Если вы посмотрите на основную оболочку с идентификатором #primary , то увидите, что у нее также есть класс .category-css . Это облегчает стилизацию темы.

Примечание: вы можете прочитать, как я имею дело с темами и макетами с Twig в этой статье из моего собственного блога.

После того, как вы установили класс в своей оболочке, очень легко сделать ваши стили условными. Допустим, у вас есть элемент с классом .element который нужно стилизовать в соответствии с темой:

 .theme-banana .element { color: yellow; } .theme-blueberry .element { color: purple; } .theme-cherry .element { color: red; } 

Я использовал свойство color но оно также может быть background , border-color или даже box-shadow . Без разницы! Даже положение фона для спрайта или пути к изображению, если это необходимо.

Это работает как шарм, но, как вы видите, это требует, чтобы мы печатали одно и то же 3 раза подряд. И если нам нужно добавить еще одну тему, мы должны повторить ее еще раз. Тогда, если нам нужно сделать другие вещи условными для темы, нам нужно повторять эти правила снова и снова … Должен быть более легкий путь!

Sass на помощь

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

Вот простой миксин, который нам нужно написать только один раз:

 @mixin theme($name, $color) { .#{$name} { .element { color: $color; } } } 

А вот как вы бы это использовали:

 @include theme(theme-banana, yellow); @include theme(theme-blueberry, purple); @include theme(theme-cherry, red); 

Абракадабра! А вот как будет выглядеть CSS при компиляции ( см. Код здесь ):

 .theme-banana .element { color: yellow; } .theme-blueberry .element { color: purple; } .theme-cherry .element { color: red; } 

Ну, это выглядит аккуратно, не так ли? Не имея ничего, кроме небольшого миксина и включения для каждой темы, нам удалось создать весь наш CSS, похожий на магию. Поэтому, когда нам нужно сделать что-то тематическое , нам просто нужно обновить ядро ​​mixin, чтобы добавить все, что нужно.

 @mixin theme($name, $color) { .#{$name} { .element { color: $color; } .other-element { background: $color; } } } 

 @mixin theme($name, $color) { $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } } 

 $themes: ( theme-banana: yellow, theme-blueberry: purple, theme-cherry: red ) !default; 

 @each $theme, $color in $themes { @include theme($theme, $color); }