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.

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.

Subscribe for coding videos

Keep growing professionally with just three curated videos weekly.

We hate spam as much as you do.