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

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

Мы также можем использовать эти переменные внутри нашего CSS, называемые переменными CSS — это простые переменные, которые разработчики объявляют для повторного использования определенных свойств CSS на странице, глобально или локально. Синтаксис достаточно прост: укажите свойство, например — размер заголовка: 30px, затем используйте его с помощью метода var().

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

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

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

Чтобы правильно понять преимущества переменных CSS, давайте сначала посмотрим, что было до их использования.

Объявление свойства CSS без переменных

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

Например в index.html:-

.home-page{  background-color: #2C2C2C; }

Точно так же мы должны определить внутри about.html или project.html файлов.

.about-page{  background-color: #2C2C2C; }

Дублирование одного и того же кода на разных страницах — плохая практика, к тому же это может привести к непредвиденным ошибкам.

Все эти проблемы можно решить с помощью переменных CSS.

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

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

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

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

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

Как объявить эти переменные

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

Он имеет следующий синтаксис: var( — имя, значение)

  1. — имя: Имя переменной должно начинаться с двух дефисов ( — имя).
  2. значение: это необязательно.

Теперь давайте обсудим два метода, с помощью которых мы можем создавать переменные CSS:

  1. Глобальные переменные: эти переменные могут быть доступны/использованы на протяжении всего документа; нам нужно только определить их в корневом селекторе.
  2. Локальные переменные: С другой стороны, локальные переменные могут использоваться только в селекторе, где они объявлены.

Поясним на простейшем возможном примере. Внутри тега body мы указали два тега.

<body> 
<h1>Locofy</h1> 
<p>One of the best no-code platform.</p> 
</body>

Теперь давайте определим переменные CSS глобально.

/* Defining global variables  */ 
:root { 
--bg-color: blue; 
--text-color: white; 
}

Теперь давайте установим переменные CSS в определенные теги HTML.

body { 
background-color: var(--bg-color);
} 
h1 { 
color: var(--text-color); 
}

Вот как будет выглядеть полный код:

Изменение переменных CSS с помощью JavaScript

Вы также можете динамически обновлять свои CSS-переменные с помощью JavaScript, например, изменять цвет кнопки или показывать красные рамки вокруг поля ввода, чтобы обозначить какую-то ошибку.

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

HTML

<p>The below button will change my font size.</p> 
<button type="button" onclick="getFontSize()">Get font size</button> <button type="button" onclick="setFontSize()">Set font size</button>

Здесь мы определяем тег абзаца. После этого мы определили две кнопки: одну для получения размера шрифта и другую для его изменения.

CSS

:root { 
--font-size: 30px; 
} 
p { 
font-size: var(--font-size); 
}

Теперь давайте определим глобальную переменную в корневом селекторе. После этого мы устанавливаем размер шрифта на тег p.

Теперь пришло время изменить размер шрифта с помощью javascript.

JavaScript

var getProperties = document.querySelector(':root'); 
function getFontSize() { 
var value = getComputedStyle(getProperties); 
alert("Font size is: "+ value.getPropertyValue('--font-size'));
} 
function setFontSize() { 
getProperties.style.setProperty('--font-size', '60px'); 
}

Здесь мы определяем переменную с именем getProperties, которая будет содержать все переменные, хранящиеся в корневом селекторе.

Позже мы определили две функции: одну для отображения текущего размера шрифта, а другую для установки нового размера шрифта.

Вот и все — размер шрифта тега абзаца увеличится с 30 до 60 пикселей.

Где можно использовать переменные CSS?

На примере мы узнали о переменных CSS и о том, как изменять переменные CSS с помощью JavaScript.

Пришло время включить его в свой проект.

Все топовые фреймворки, такие как React, Angular и Vue, поддерживают переменные CSS из коробки. И это так же просто, как то, что мы видели в этом посте.

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

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

В этом может сильно помочь Locofy.ai. Используя плагин Locofy.ai для Figma, вы можете не только экспортировать свои проекты в готовый к производству код в React, React Native, HTML-CSS, Gatsby и Next.js, но плагин также может генерировать переменные CSS.

Locofy.ai обращается к вашим стилям Figma для создания переменных CSS. Кроме того, он обнаруживает часто используемые повторно переменные, например, шрифты и отступы, а также преобразует их в переменные CSS.

Надеюсь, вам понравится.

Вот так — спасибо.

Рассмотрите возможность стать участником Medium, если вам нравится читать подобные истории и вы хотите помочь мне как писателю. Это стоит 5 долларов в месяц и дает вам неограниченный доступ к контенту Medium. Я получу небольшую комиссию, если вы зарегистрируетесь по моей ссылке.

Первоначально опубликовано на https://blog.locofy.ai.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.