CSS custom properties (also called CSS variables) landed in browsers in 2016 and are now supported everywhere. If you're still using Sass variables or hardcoded hex values throughout your CSS, this guide will show you what you're missing — and why custom properties solve problems that preprocessors can't. The basics /* Declare a custom property on :root */ :root { --primary : #2f855a ; --primary-light : #48bb78 ; --spacing-md : 1rem ; --border-radius : 8px ; } /* Use it anywhere */ .button { background-color : var ( --primary ); border-radius : var ( --border-radius ); padding : var ( --spacing-md ) calc ( var ( --spacing-md ) * 1.5 ); } .button :hover { background-color : var ( --primary-light ); } Enter fullscreen mode Exit fullscreen mode Custom properties are inherited by child elements and can be redeclared at any scope — which is what makes them fundamentally different from Sass variables.…