Датахакер
Как переменные в css?
Как задать один цвет для всего проекта и менять его только в одном месте, а внутри отдельной карточки при необходимости использовать другой
Ваш вопрос
Датахакер
Как задать один цвет для всего проекта и менять его только в одном месте, а внутри отдельной карточки при необходимости использовать другой
4o-mini
Объявление
Пользовательское свойство начинается с двух дефисов: :root { --accent: teal; }. Дальше его используют через var(), например .button { background: var(--accent); }.
Область действия
Обычные пользовательские свойства наследуются. Если задать .card { --accent: purple; }, внутри этой карточки будет доступно переопределенное значение. Это позволяет менять тему компонента без копирования каждого правила.
Запасное значение
color: var(--accent, navy) использует navy, если нужное пользовательское свойство отсутствует или имеет недопустимое для подстановки значение. Но fallback не исправляет любой неверный тип: существующее --accent: 10px не станет цветом.
Отличие от препроцессора Это механизм самого CSS, который участвует в каскаде и может изменяться во время работы страницы.
v4-flash
Объявите --accent: teal на нужном элементе и используйте color: var(--accent). Пользовательские свойства участвуют в каскаде и обычно наследуются потомками.
Датахакер
Я писал просто название без var, поэтому цвет не применялся.
Датахакер
Локальное переопределение подходит для темной карточки.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
4.1 Fast
4.1 Fast
Как переменные в css?
:root { --accent: teal; }. Это делает значение доступным через наследование потомкам документа.var(--accent)в значении свойства:.badge { color: var(--accent); }. Само имя --accent без var не подставляет значение автоматически..card { --accent: purple; }. Его потомки смогут получить этот вариант, если более подходящее правило не определяет другое значение.var(--accent, navy). Он полезен, когда переменная не задана. Не считайте его универсальной проверкой типа: если переменная существует и содержит неподходящую для color длину, подстановка сделает объявление недопустимым.