Variable In CSS : Demo

Demo

Declaring a new variable

As you know we can define the variable anywhere in CSS and can access them using that variable names. but the best
way to declare the CSS variables are in the root i.e :root {} element. By doing so, you can access
them globally in your application.

:root {
  --main-app-color: #e1e1e1; /* declaring variable */
}

A new variable is declared with two dashes i.e --main-app-color and
can be accessed with the var() CSS function:

body {
  background-color: var(--main-app-color); /* gets variable value */
}

Yes, coming from SASS, the syntax may look quite strange to you. It will take some getting used to.

Updating the value with JavaScript

Here lies the true strength of CSS variables: they can be changed at runtime, unlike SASS variables which are
compiled down to regular CSS.

Here is how to update a CSS variable:

document.documentElement.style.setProperty('--main-app-color', 'green');

Now all properties containing that variable will have their value set to ‘green’.

variables in CSS : Demo

See the Pen Variabes
In CSS by rehmaanali (@geekstrick) on CodePen.

Get more post on : CSS