Переменные CSS — функция var()

Оглавление

    Показать оглавление

CSS-переменные

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

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

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

Традиционный способ

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

Пример

 body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: 
  #1e90ff;
  
  background-color: #ffffff;
  padding: 15px;
}
button {
  
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px 
  solid #1e90ff;
  padding: 5px;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #1e90ff;
}

h2 {
  border-bottom: 2px solid #1e90ff;
}

.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}

button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Синтаксис функции var()

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

Синтаксис функции var() следующий:

 var(--name, value)
name

Необходимый. Имя переменной (должно начинаться с двух тире)

value

Необязательный. Резервное значение (используется, если переменная не найдена)

Примечание. Имя переменной должно начинаться с двух дефисов (--) и учитывается регистр!

Как работает var()

Прежде всего: переменные CSS могут иметь глобальную или локальную область действия.

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

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

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

Следующий пример аналогичен приведенному выше, но здесь мы используем функцию var().

Сначала мы объявляем две глобальные переменные (--blue и --white). Затем мы используем var() для вставки значений переменных позже в таблицу стилей:

Пример

 :root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

  body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
  
.container {
  
  color: var(--blue);
  background-color: var(--white);
  padding: 
  15px;
}
button {
  background-color: var(--white);
  
  color: var(--blue);
  border: 1px solid var(--blue);
  
  padding: 5px;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Преимущества использования var():

  • делает код более читаемым (более понятным)

  • значительно упрощает изменение значений цвета

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

Пример

 :root {
  --blue: #6495ed;
  --white: #faf0e6; 
}

  body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
  
.container {
  
  color: var(--blue);
  background-color: var(--white);
  padding: 
  15px;
}
button {
  background-color: var(--white);
  
  color: var(--blue);
  border: 1px solid var(--blue);
  
  padding: 5px;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --blue: #6495ed;
  --white: #faf0e6; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

Поддержка браузера

Цифры в таблице указывают первую версию браузера, полностью поддерживающую Функция var().

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Функция

var()

Вставляет значение переменной CSS