Как легко создавать темы с помощью сменных CSS

1656672370 kak legko sozdavat temy s pomoshhyu smennyh css

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

Это может быть, например, когда вам нужно пометить продукт электронной коммерции как добавлено в корзину. Или, возможно, на вашем сайте есть раздел администратора, содержащий более темный раздел боковой панели.

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

Я также создал скринкаст о создании темы в своем бесплатном курсе CSS Variables из 8 частей. Если вам интересно узнать больше о курсе, посмотрите эту статью.

Настройка

Мы будем работать на примере сайта-портфолио. Наша цель — представить один из проектов в нашем портфолио так, чтобы он выделялся из других. Технически мы сделаем это, добавив класс к конкретному элементу, который мы хотим представить.

Вот как сначала выглядит сайт портфолио:

1*Eu0wU_hiyqOqrhyxNamvsg

Я не буду говорить о HTML для сайта, поскольку он достаточно прост, и я предполагаю, что вы знаете HTML. Однако если вам интересно повозиться с кодом, я создал для этого площадку Scrimba здесь.

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

html, body {  
  background: #ffeead;  
  color: #ff6f69;  
}

h1, p {  
  color: #ff6f69;  
}

#navbar a {  
  color: #ff6f69;  
}

.item {  
  background: #ffcc5c;  
}

button {  
  background: #ff6f69;  
  color: #ffcc5c;  
}

Как видите, мы используем только три цвета: #ffeead, #ff9f96 и #ffcc5c. Однако мы часто их повторно используем. Итак, это идеальный вариант использования сменных CSS.

Чтобы начать его использовать, нам сначала нужно объявить наши переменные. Мы сделаем это в :root псевдокласс:

:root {  
  --red: #ff6f69;  
  --beige: #ffeead;  
  --yellow: #ffcc5c;  
}

Тогда мы просто поменяем наши шестнадцатеричные значения переменными:

html, body {  
  background: var(--beige);  
  color: var(--red);  
}

h1, p {  
  color: var(--red);  
}

#navbar a {  
  color: var(--red);  
}

.item {  
  background: var(--yellow);  
}

button {  
  background: var(--red);  
  color: var(--yellow);  
}

Теперь мы имеем силу переменных в нашем CSS, то есть мы можем просто изменить --red на что-то другое, и оно будет обновлено на всем сайте.

Если вам трудно понять, что здесь происходит, просмотрите мою статью «Изучите переменные CSS за 5 минут» или запишитесь на курс.

Создание темы

Теперь давайте создадим тему. Мы хотим иметь возможность добавлять a .featured один из наших четырех элементов проекта, и таким образом будет выделять этот элемент среди других. В частности, мы изменим красный на #ff5564 и желтый#ffe55b.

Вот как это будет выглядеть в разметке:

<div class="item **featured**">  
  <h1>project d</h1>  
  <button>learn more</button>  
</div>

Это изменение должно повлиять на стиль в четырех разных местах:

  • цвет фона <div>
  • цвет<h1>
  • цвет фона <button>
  • цвет <button>

По старинке

Раньше нам приходилось решать это, создавая специальный селектор CSS для каждого элемента внутри .featured элемент, как это:

.featured {  
  background: #ffe55b;  
}

.featured > h1 {  
  color: #ff5564;  
}

.featured > button {  
  background: #ff5564;   
  color: #ffe55b;  
}

Этот подход не очень гибок. Если вы хотите добавить еще один элемент в ваши портфолио, вам также придется написать специальные селекторы для них.

Новый путь

Однако с переменными CSS это становится гораздо проще. Мы просто переопределим переменные внутри .featured такой класс:

.featured {  
  --yellow: #ffe55b;  
  --red: #ff5564;  
}

Поскольку CSS наследуются, все элементы внутри .featured какая ссылка --red или--yellow Теперь используйте локальные значения, а не глобальные. Итак <button> или <h1> элементы автоматически используют локальные значения для переменных.

Вот как это смотрится на странице.

Как видите, элемент

Как видите, элемент «project d» выглядит несколько иначе, чем остальные.

Аккуратно, что ли?

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

Если вам интересно узнать об этой технологии, просмотрите мой бесплатный интерактивный курс CSS Variables из 8 частей на Scrimba.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.

буткемп-баннер
Щелкните здесь, чтобы попасть в тренинг для углубленного обучения.

Добавить комментарий

Ваш адрес email не будет опубликован.