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

Опубликовано: 2022-02-16

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

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

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

Давайте начнем!

Объявление переменной

Переменные могут иметь глобальную или локальную область видимости. Чтобы определить переменную глобально, вы используете селектор :root.

 :root { --base-font-size: 1.1rem; }
ОТКРЫТЬ В ПОПАПЕ
 :root { --base-font-size: 1.1rem; }

Селектор :root соответствует корню документа, то есть <html> в нашем конкретном случае.

Чтобы объявить пользовательское свойство CSS (переменную), вы должны начать с двух дефисов (--). Переменные чувствительны к регистру, например:

--base-font-size и --Base-Font-Size — это две разные переменные.

Чтобы определить переменную локально, вы используете селектор элемента, в котором вы хотите использовать переменную.

 #first-container { --background: #ccc; }
ОТКРЫТЬ В ПОПАПЕ
 #first-container { --background: #ccc; }

После того, как вы определили переменную, необходимо вызвать ее.

Функция var()

Функция var() используется для вставки значения определенной переменной CSS. Функция заменяет себя значением переменной. Давайте рассмотрим пример:

HTML-код

  • Скопируйте и вставьте этот код в редактор кода.
  • Сохраните файл как index.html .
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>
ОТКРЫТЬ В ПОПАПЕ
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html>

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

CSS-код

  • Создайте файл с именем style.css (в том же каталоге, что и index.html ).
  • Вставьте код ниже и сохраните файл.
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }
ОТКРЫТЬ В ПОПАПЕ
 /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
 border-radius: 5px; }

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

Здесь есть на что обратить внимание:

  1. Создание цветовой палитры — простой процесс.
  2. Можно использовать переменную внутри определения другой переменной, например, цвет в определении граничных переменных.
  3. Переменные наследуются, свойство color элемента .container-* влияет на его прямые дочерние элементы. В данном случае элемент <p>.

Чтобы переопределить переменную, вы объявляете ее внутри ее контейнера, делая ее более конкретной.

  • Отредактируйте код CSS:
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }
ОТКРЫТЬ В ПОПАПЕ
 button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; }

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

Переменные и медиа-запросы

Переменные также могут наследоваться и переопределяться в медиа-запросах CSS.

  • Добавьте этот код в переменные:
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }
ОТКРЫТЬ В ПОПАПЕ
 :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }

Мы определили базовую ширину для элемента-обертки. Теперь мы можем применить эти переменные к свойству ширины .wrapper.

  • Добавьте этот код в конец файла CSS:
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }
ОТКРЫТЬ В ПОПАПЕ
 .wrapper { width: var(--wrapper-width);
 margin: 0 auto; }

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

Чтобы определить медиа-запрос для устройств с экраном шириной менее 1100 пикселей, мы напишем следующий медиа-запрос.

  • Отредактируйте код CSS:
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }
ОТКРЫТЬ В ПОПАПЕ
 @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } }

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

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

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

Резюме

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

Надеюсь, вам понравился этот урок. Спасибо за чтение!