Custom properties are the wonderful new features of CSS with extensive support in contemporary browsers. A custom property name that is pre-fixed with ‘–’ like, –heading-color: #00ff00; and are accessed using the var() function. For example color: var(–heading-color);
1 2 3 4 5 6 7 8 |
:root { --heading-color: red; --heading-bg: #a1a1a1; } H1 { background-color: var(--heading-bg); color: var(--heading-color); } |
Previously we have been using variables with CSS preprocessor like Sass and Less, now variables have … Continue reading “Custom Property of CSS – Variable in native CSS”