Как добавить переменные CSS для настройки дочерних тем WordPress

Переменные CSS, также называемые пользовательскими свойствами CSS, позволяют легко повторно использовать их в таблицах стилей CSS.

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

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

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

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

Переменные CSS более эффективны, чем работа с простым CSS, но не требуют расширенной настройки, такой как SASS. Браузер выполняет «компиляцию», и вы не зависите от настроек и среды, которая выводит скомпилированный CSS.

Этот подход хорошо подходит для таких вещей, как стилизация простых дочерних тем WordPress. Для таких проектов, как правило, требуется обновление стиля для создания фирменной темы. Переменные CSS могут помочь, так как они предоставляют управляемый список переопределений стилей и не требуют специальной среды для компиляции SASS в CSS.

Получите темы Genesis Framework и StudioPress бесплатно!

Клиенты WP Engine получают доступ к набору премиальных тем WordPress, который входит в стандартную комплектацию каждого плана! Вы можете начать создавать свой следующий сайт всего за 20 долларов в месяц! Узнайте больше здесь.

Как использовать переменные CSS

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

Например, синий должен быть немного темнее. Это происходит все время. Да, конечно, есть надежный найти и заменить. Однако корректировка значения в одном месте более эффективна при внесении этого глобального изменения и повторном использовании переменных.

Вот как выглядит переменная CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

Поскольку я оптимизирую рабочий процесс для стилизации дочерней темы WordPress, я добавил переменные в свой файл styles.css . Это всего лишь «короткий список», и по мере того, как будет добавляться больше, эффективное именование каждой переменной становится важным.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

Функция var()

Как на самом деле используются переменные? Это довольно просто. Сначала объявляется переменная, а затем она используется в необходимом наборе правил CSS.

Масштаб — важная вещь, о которой нужно знать. Переменные должны быть объявлены в селекторе CSS, который находится в пределах его предполагаемой области. Во многих случаях вам нужно, чтобы переменные были доступны в глобальной области видимости, чтобы они были доступны всем. Вы можете использовать селектор :root или body для глобальной области видимости. Однако могут быть случаи, когда вам нужно ограничить область действия и вы хотите работать с локальной переменной.

Легко обнаружить переменные; перед ними две черточки. Два тире (-) должны быть включены.

Синтаксис var() довольно прост:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

Вместо настройки цвета в нескольких местах значение переменной корректируется в одном месте.

Веб-инспектор (в данном случае Chrome) позволяет вам проверять и видеть, какие переменные используются.

В следующем примере сначала определяются глобальные настраиваемые свойства с именами --light-gray и --text-black . Вызывается функция var() , которая позже вставляет значение пользовательских свойств в таблицу стилей:

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

Стоит отметить, что переменные могут быть очень полезны при работе с контрольными точками CSS. Используя глобальные переменные в разных точках останова, такие вещи, как отступы и другие полезные стили, можно настроить для различных размеров.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

Вот пример переменных, которые можно найти в локальной области видимости. Пока мы коснулись только глобальной области видимости, так что вы заметите, что дело не в корне. Это стили для предупреждающего сообщения. Здесь объявлен цвет текста предупреждения, который полезен только для этого класса. Кроме того, стоит отметить, что calc также может быть использован.

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

Приведенные выше примеры охватывают основы переменных CSS. Эти концепции могут быть применены к пользовательским темам WordPress или любому другому пользовательскому CSS, который вы пишете. Переменные имеют преимущества перед простым CSS и помогут вам работать более эффективно при внесении изменений в масштабе всего сайта. Они позволяют лучше организовать таблицы стилей без необходимости использования препроцессора.

Подпитывайте свободу творчества с помощью WP Engine

WP Engine обеспечивает свободу творчества на WordPress. Продукты компании, самые быстрые среди всех поставщиков WordPress, обеспечивают 1,5 миллиона цифровых возможностей. Больше из 200 000 лучших сайтов в мире используют WP Engine для обеспечения своих цифровых возможностей, чем кто-либо другой в WordPress. Узнайте больше на wpengine.com или поговорите с представителем сегодня!