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

• CSS Custom Properties

1. Определение переменных

:root {
    --color: green;
}
body {
    background-color: var(--color);
}

2. Резервное значение

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

3. Переменные в calc()

:root {
    --a: 1em;
    --b: 2;
}
body {
    font-size: calc(var(--a) * var(--b));
}

4. Переопределение переменной в @media

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

@media (max-width: 700px) {
    :root { --color: yellowgreen; }
}

5. Переменные в SVG

<svg height="100" width="100">
    <circle cx="50" cy="50" r="50" fill="var(--color)" />
</svg>

:root {
    --color: yellowgreen;
}