freeCodeCamp/guide/russian/certifications/responsive-web-design/basic-css/cascading-css-variables/index.md

2.5 KiB
Raw Blame History

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)

источники

  1. Посетите страницу каскадных CSS-переменных MDN для получения дополнительной информации.
  2. Перна, Мария Антониетта. «Практическое руководство по CSS переменных (Пользовательские свойства)» SitePoint. 01 августа 2018. Доступ: 5 октября 2018 г.