Школа
Веб-разработка

ЦСС‑переменные: как использовать и для чего могут пригодиться

1 авг 2019
👁 7589   🗩2
Веб-разработка

ЦСС‑переменные: как использовать и для чего могут пригодиться

1 авг 2019
👁 7589   🗩2
Юрий Мазурский
Разработчик и дизайнер
Полезно
 9
9
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

В ЦСС есть возможность определять переменные (англ. Custom properties).

Объявляются они так же, как любые другие свойства внутри любого блока, но всегда с префиксом --

Синтаксическая диаграмма именования переменных и селекторов

В названиях переменных можно использовать латиницу, цифры, подчёркивание и дефис:

Синтаксическая диаграмма именования переменных и селекторов

html {
  --textColor: #000;
  --wrapperWidth: 1000px;
  --heading-2: 30px/36px Helvetica, Arial, sans-serif;
}

Переменной можно назначить любое значение и использовать её в любом свойстве. В переменную нельзя записывать селекторы или сами свойства. Только значения.

Значение переменной используется с помощью ЦСС‑функции var():

body {
  color: var(--textColor);
}

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

body {
  color: var(--textColor, #00f);
}

Переменные доступны внутри селектора, в котором они были определены и во всех его потомках. Если определить переменную в глобальном псевдоклассе :root или в html, она будет доступна на всей странице.

Например, можно красить все кнопки в один цвет, но отдельные акцентные кнопки — в другой:

:root {
  --buttonColor: blue;
}
.button {
  background-color: var(--buttonColor);
}
.accentButton {
  --buttonColor: red;
}

Ещё по теме ЦСС‑переменных:

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 9
9
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Дима Шишкин

Вот ещё можно почитать про использование кастомных свойств: https://www.smashingmagazine.com/…/css‑custom‑properties‑cascade

Евгений Удод

Видимость ЦСС‑переменных определяется каскадом, подобно свойству color или font-size.

:root определяет первый тег документа (корневой), например <html>. Потому переменная и видна во всём документе, так как все остальные теги вложены в первый.

Неважно, какому селектору вы задали переменную, — она будет доступна всем его потомкам.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы