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.

Refer

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.