37 lines
2.5 KiB
Markdown
37 lines
2.5 KiB
Markdown
---
|
||
title: Cascading CSS Variables
|
||
localeTitle: Каскадные переменные CSS
|
||
---
|
||
## Каскадные переменные CSS
|
||
|
||
Каскадные переменные CSS, официально называемые пользовательскими свойствами, являются объектами, которые ведут себя аналогично традиционным переменным. В том , что переменные позволяют хранить данные и обновляться , чтобы отражать новые значения позже 2.
|
||
|
||
Переменные CSS определены, чтобы содержать определенные значения и использоваться повторно в документе. Они устанавливаются с использованием пользовательской `--main-color: black` свойств (например, `--main-color: black` ) и доступны с помощью функции `var()` (например, `color: var(--main-color)` ) 1 . Объявите переменную CSS в селекторах `:root` или `body` для глобального доступа.
|
||
|
||
При сохранении сложных документов CSS полезно не только использовать переменные CSS, но и умные. При создании будущих обновлений вместо поиска потенциальных сотен строк кода нужно только обновить необходимую переменную CSS 1 .
|
||
|
||
### Синтаксис
|
||
|
||
```css
|
||
:root {
|
||
--main-bkgnd-color: #00B8CB;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--main-bkgnd-color);
|
||
font-family: 'Raleway', Helvetica, sans-serif;
|
||
}
|
||
```
|
||
|
||
Объявление переменной:
|
||
|
||
```css
|
||
--custom-name: value
|
||
```
|
||
|
||
Использование переменной: `css var(--custom-name)`
|
||
|
||
### источники
|
||
|
||
1. [Посетите страницу каскадных CSS-переменных MDN для получения дополнительной информации.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
|
||
2. [Перна, Мария Антониетта. «Практическое руководство по CSS переменных (Пользовательские свойства)» _SitePoint._ 01 августа 2018. Доступ: 5 октября 2018 г.](https://www.sitepoint.com/practical-guide-css-variables-custom-properties/) |