How do CSS custom properties differ from Sass/LESS variables in scope and runtime behavior?

How do CSS custom properties differ from Sass/LESS variables in scope and runtime behavior?

• A. CSS variables are runtime, cascade-based, and themeable; Sass/LESS variables are compile-time constants and do not change at runtime.
• B. CSS variables are compiled away at build time; Sass variables exist in the DOM.
• C. CSS variables are global and cannot be overridden; Sass variables are per-file only.
• D. CSS variables are only for colors; Sass variables can be any property.

Answer: (A)

The key idea is when and how values are resolved. CSS custom properties are actual CSS that the browser reads at runtime. They participate in the cascade and inheritance, so you can override them with more specific selectors or switch themes by changing values in the DOM (often with JavaScript or data attributes). Because they’re resolved while the page is live, they can respond to context like media queries or user actions without recompiling. Sass/LESS variables, on the other hand, are resolved during preprocessing. They’re substituted with concrete values before the CSS is sent to the browser, so they don’t exist in the final CSS and can’t be changed by normal CSS rules or runtime DOM changes. They’re scoped in the preprocessor (lexical scope) and effectively become constants in the generated CSS. So the best description is that CSS variables are runtime, cascade-based, and themeable, while Sass/LESS variables are compile-time constants that don’t change at runtime.

The key idea is when and how values are resolved. CSS custom properties are actual CSS that the browser reads at runtime. They participate in the cascade and inheritance, so you can override them with more specific selectors or switch themes by changing values in the DOM (often with JavaScript or data attributes). Because they’re resolved while the page is live, they can respond to context like media queries or user actions without recompiling.

Sass/LESS variables, on the other hand, are resolved during preprocessing. They’re substituted with concrete values before the CSS is sent to the browser, so they don’t exist in the final CSS and can’t be changed by normal CSS rules or runtime DOM changes. They’re scoped in the preprocessor (lexical scope) and effectively become constants in the generated CSS.

So the best description is that CSS variables are runtime, cascade-based, and themeable, while Sass/LESS variables are compile-time constants that don’t change at runtime.