CSS Variables, also referred to as Custom Properties, allow you to store and reuse values in your CSS. Unlike preprocessor variables (like Sass or Less), CSS Variables are natively supported in the browser and work dynamically in the cascade, meaning they can be scoped to specific elements and change based on media queries or JavaScript interactions.
CSS variables are defined using the --
syntax and are typically placed in the :root
selector to apply globally.