Переменные в CSS

 

Переменные CSS подчиняются каскаду и наследуют свое значение от своего родителя.

Развитие переменных тормозит гребаный Эксплорер - но в 2020 году он скончался !!!

Теперь руки у нас развязаны - вперед....

Что можно передать перменными?

:root {
  --main-color: #76FF03;
  --primary-shadow: 5px 7px #d3d3d3;
  --primary-font: Georgia;
  --secondary-font: sans-serif;
  --card-height: 43%;
  --min-card-width: 100px;
  --card-margin: 10px 0;
  --general-padding: 10px;
  --transition: .6s ease-in-out;
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

Использование переменных:

По сути мы один раз задаем значение цвета для переменной "--alert-color", а потом везде где нужен наш цвет вставляем название переменной.

<style>
<!-- Определяем переменную -->
:root {
 --alert-color: #ff6f69;
}

<!-- Вставляем переменную -->
#title {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}
</style>

*(:root) - это главный элемент doom дерева для переменных!

- Подстраховка если переменная не определилась!

.two {
  color: var(--my-var, red); /* red если --my-var не определена */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /* pink если --my-var и --my-background не определены */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */
}

Калькулятор в Переменных:

height: calc(var(--card-height) - 100px);

Также переменные можно использовать и в грид шаблонах.

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

Динамика в переменных:

width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);

<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />

- каждая последующая картинка будет в 2,3,4 раза больше первой!

Использование переменных в JS:

// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);

вапап