CSS Variables / Custom Properties Detail Introduction
What are CSS custom properties (variables)
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be reused throughout the document using the (var()) function.
Why CSS custom properties
- The obvious reason is reusability, organization and readability
- Easier to get started compared to sass and SCSS
- No transcompiling required, they are native to the browser
- Have access to DOM
- Local scopes,
- Can be changed with JS
- Ideal for responsiveness These and [many other reasons] (https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/) makes CSS custom properties perfect for themes and any CSS projects.
Declaration of variable happens in the :root
selector which is a sedo-class
that points to the root element. When we defined a variable inside :root
will be available inside all our CSS.
To use the declared variable, we just use the var() CSS function with the variable name inside it.
Example
:root {
--primary-color: #ff6f69;
--seconday-colour: #ffeead;
}
html, body {
background: var(--seconday-color);
color: var(--primary-color);
}
h1 {
color: var(--primary-color);
}
navbar a {
color: var(--primary-color);
}
The video and the links above do an excellent job of explaining how to use custom CSS properties in detail.