Question 1

What are SCSS variables and how do they differ from CSS custom properties?

Accepted Answer

SCSS variables are compile-time ($name); CSS custom properties are runtime (var(--name)) and cascade. Use SCSS vars for build-time theming tokens you do not need to change in the browser; use CSS variables for dynamic themes, dark mode toggles, and component-level overrides. Many design systems emit CSS variables from SCSS maps.

Question 2

How does variable scope work in SCSS?

Accepted Answer

Variables are local to the block where defined unless marked !global; nested rules create local scopes. Accidentally shadowing a global $color inside a mixin/nest is a common bug. Prefer module system (@use) with explicit namespaces over globals.

Question 3

Why prefer maps for design tokens over dozens of loose variables?

Accepted Answer

Maps group related tokens and enable loops/functions to generate utilities systematically. $spacers: ("sm": 8px, "md": 16px) scales better. Combine with @each to emit CSS custom properties or utility classes.

Question 4

Default values with !default — when useful?

Accepted Answer

Libraries set $var: value !default so consumers can override before import/@use configure. Classic for theming frameworks. With @use, prefer configuration via with (...) instead of legacy !default patterns when possible.

Question 5

How do you share variables safely with @use?

Accepted Answer

Put tokens in a _tokens.scss module; @use 'tokens' as t; reference t.$brand. Avoid @import (deprecated) which polluted global scope. Forward tokens via @forward for public API packages.

Question 6

Scenario: two teams redefine $primary differently across partials.

Accepted Answer

Enforce a single tokens module, ban duplicate token files in lint, and generate tokens from design pipeline. Name collisions were easy with @import. Module namespaces make ownership clear.

Question 7

Can SCSS variables interpolate into selectors/property names?

Accepted Answer

Yes via #{$var} interpolation for selectors, filenames in url(), and some property constructs. Overuse harms readability. Prefer maps/loops for systematic generation over clever interpolation.

Question 8

Null and true/false variables — practical uses?

Accepted Answer

Feature flags in SCSS (e.g., $enable-rounded: true) gate mixins/output; null can mean 'omit property'. Keep flags few and documented. Prefer CSS-native features when browser support allows.

Question 9

How should colors be stored for theming systems?

Accepted Answer

Semantic tokens ($color-text-primary) referencing primitive palettes; expose CSS variables for runtime theme switches. Avoid hard-coding hex in components. Support contrast checks in CI for token pairs.

Question 10

Debugging: variable undefined after migrating to @use.

Accepted Answer

You must namespace members or use as *; load order/@forward differs from @import globals. Update all references. Configure modules with with () for overrides. Remove circular loads.

Question 11

Units and variable math — pitfalls?

Accepted Answer

Incompatible units error (px + %); division slash ambiguity historically; use math.div. Keep tokens unit-consistent. Prefer calc() in output CSS when mixing runtime units.

Question 12

CSS variables generated from SCSS maps — pattern?

Accepted Answer

Loop map keys to :root { --space-#{$k}: #{$v}; } then use var() in components. Gives compile-time validation of token existence and runtime themability. Great interview architecture answer.

Question 13

When are SCSS variables the wrong tool?

Accepted Answer

When values must change per component instance at runtime without rebuilding (user themes, JS-driven). Use CSS custom properties or inline styles carefully. SCSS cannot read DOM state.

Question 14

Lead: token pipeline from Figma to SCSS/CSS.

Accepted Answer

Export primitives → transform to SCSS maps + CSS variables → version packages → consume via @use in apps. Automate contrast and naming lint. Avoid manual hex copy. Treat tokens as a product API.

Question 15

Comparison: $brand-color vs --brand-color in a hybrid codebase.

Accepted Answer

$brand-color for Sass tooling/loops at build; --brand-color for cascade/theming; often both, linked. Document which layer is source of truth. Don't duplicate conflicting values.

Variables SCSS Interview Questions

Other SCSS interview topics