Contents hide 1) Declaring a new variable 1.1) Updating the value with JavaScript 1.2) variables in CSS : Demo 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. CSS :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: CSS 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. Browser Compatibility Advantage CSS Variables (Custom Properties) CSS variables: they can be changed at runtime, unlike SASS variables which are compiled down to regular CSS. 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: JavaScript 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 Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: css variables, css3, root property