2.5 KiB
title | localeTitle |
---|---|
Cascading CSS Variables | Каскадные переменные CSS |
Каскадные переменные CSS
Каскадные переменные CSS, официально называемые пользовательскими свойствами, являются объектами, которые ведут себя аналогично традиционным переменным. В том , что переменные позволяют хранить данные и обновляться , чтобы отражать новые значения позже 2.
Переменные CSS определены, чтобы содержать определенные значения и использоваться повторно в документе. Они устанавливаются с использованием пользовательской --main-color: black
свойств (например, --main-color: black
) и доступны с помощью функции var()
(например, color: var(--main-color)
) 1 . Объявите переменную CSS в селекторах :root
или body
для глобального доступа.
При сохранении сложных документов CSS полезно не только использовать переменные CSS, но и умные. При создании будущих обновлений вместо поиска потенциальных сотен строк кода нужно только обновить необходимую переменную CSS 1 .
Синтаксис
:root {
--main-bkgnd-color: #00B8CB;
}
body {
background-color: var(--main-bkgnd-color);
font-family: 'Raleway', Helvetica, sans-serif;
}
Объявление переменной:
--custom-name: value
Использование переменной: css var(--custom-name)