Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Взгляните на следующие CSS-правила:

2 В правилах трижды используется один и тот же цвет фона #ccc, который установлен у свойства background-color. Скорее всего эти значения из одной цветовой палитры, и дизайнер предполагал, что фоновый цвет блоков должен быть одинаковый. Проходит время, проект растет, таких блоков становится больше, у них добавляются другие одинаковые свойства, а потом приходит новый дизайнер и решает все поменять. Если блока всего три, то ничего страшного, а если цветовая схема состоит из 10-20-30 различных цветов и надо быстро их поменять во всем проекте?

3 Когда-то разработчики решили, что хорошо бы иметь цвета или другие шаблонные значения в одном месте, например, в начале проекта. Логика проста: нужно что-то изменить? Меняется одно значение и в проекте автоматически вносятся изменения. Ранее это было возможно только в рамках специальных программ-препроцессоров, таких, какSass. Такие программы поддерживали переменные - специальные конструкции, которые позволяют хранить нужное нам значение. Сегодня такие переменные изначально доступны в CSS и для их использования не требуется иметь специальные препроцессоры.

4 Переменные записываются по шаблону: --имя-переменной: значение;. Благодаря этому цвет фона из прошлого примера можно записать так: --main-background: #ccc;. Но куда это вставлять? Для начала используем специальный псевдокласс :root, который позволит вынести переменную для всего проекта, то есть вглобальную область видимости. Про другие области мы поговорим чуть позже. Итоговый код с переменной в глобальной области видимости будет выглядеть так:

5 Как же ее использовать? Вначале это может показаться не очень удобным, но внутриCSSесть функция var(), которая принимает имя переменной и подставляет ее значение "как есть". Что вы укажете в переменной, то и подставится, даже если значение неправильное. Заменим в прошлом примере все значения background-color на var(--main-background)

6 Теперь, чтобы одновременно поменять фон во всех блоках достаточно изменить значение переменной --main-background.

7 Важно: имя для переменной вы выбираете сами. Тут CSS не накладывает сильных ограничений. Вы можете использовать латинские символы в любом регистре, цифры, подчеркивание и тире. Обратите внимание, что регистр имеет значение. Переменные --color и --Color - две разные переменные

8 <h2>Области видимости переменной</h2>

9 В прошлом примере был использован псевдокласс :root, который позволил установить переменные для всего проекта сразу, но сами переменные можно указать в любом месте проекта, например для определенного блока.

10 В этом примере переменная --padding доступна только для блока с классом main-section ивсех его потомков

11 <a>Codepen</a>

12 Внутренние отступы будут установлены и для элемента <div class="main-section"> и для , так как он находится внутри main-section. Такие переменные имеютлокальную область видимости, то есть они видны только в рамках того элемента, у которого и была установлена переменная. Проверить это легко - достаточно добавить еще один элемент с классом paragraph, который будет лежать вне main-section:

13 <a>Codepen</a>

14 Свойство padding: 20px 30px будет установлено только для элемента с классом paragraph, который находитсявнутриэлемента с классом main-section. Таким же образом можно и переопределять значения для глобальных переменных, указав новое значение в локальной области видимости:

15 <a>Codepen</a>

16 Другой пример:

17 <a>Codepen</a>

18 Оба параграфа получили свойство padding: 20px 30px так как унаследовали значение переменной от общего стиля.

19 Это может выглядеть очень запутанно, и, на самом деле, так и есть! В большинстве случаев разработчики стараются использовать исключительно глобальные переменные, так как:

20 <ol><li>Они находятся в одном месте</li>

21 <li>В любом месте проекта можно быстро понять, чему равна та или иная переменная</li>

22 </ol>Стоит ли забыть про локальные переменные? Нет! Они так же активно используются, но в рамках глобальных изменений. Например, при реализации светлой и темной темы. Глобально может быть установлена светлая тема, а для класса с темной темой эти переменные переопределяются. Такой вариант вполне очевиден и не привносит дополнительных проблем, так как переменные переопределяются все сразу.

23 <h2>Значение переменных по умолчанию</h2>

24 При использовании функции var() можно указать не только имя переменной, но и значение по умолчанию, если вдруг в переменной ничего нет. Ситуация не настолько частая, но знать про такую особенность важно.

25 Если переменной --bg нет, то в качестве значения будет использовано значение #fff.