SCSS Interview Questions & Answers

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

How does variable scope work in SCSS?

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

Default values with !default — when useful?

How do you share variables safely with @use?

Scenario: two teams redefine $primary differently across partials.

Can SCSS variables interpolate into selectors/property names?

Null and true/false variables — practical uses?

How should colors be stored for theming systems?

Debugging: variable undefined after migrating to @use.

Units and variable math — pitfalls?

CSS variables generated from SCSS maps — pattern?

When are SCSS variables the wrong tool?

Lead: token pipeline from Figma to SCSS/CSS.

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

What is SCSS nesting and what problem does it solve?

What is the parent selector & used for?

Why is deep nesting considered harmful?

How does nesting interact with media queries?

Nesting @media vs separate breakpoint files — trade-offs?

Output: .nav { li { a { color: red } } } compiles to?

How do you nest pseudo-elements cleanly?

Scenario: nested styles broke after HTML refactor moved a wrapper.

Native CSS nesting vs SCSS nesting — awareness?

How can & create a suffix modifier pattern?

Debugging: unexpectedly high specificity from nesting + IDs.

Nesting at-rules like @supports inside selectors — useful?

Architecture: nesting guidelines for a large design system.

Lead: migrate deeply nested legacy SCSS to flatter structure.

What is an SCSS mixin?

Mixin vs function vs placeholder (%extend) — differences?

How do you pass content blocks into mixins?

Argument defaults and keyword args in mixins?

When is a mixin better than a duplicated class in HTML?

Scenario: mixin outputs vendor prefixes still — problem?

How can mixins hurt CSS bundle size?

Write a clear API for a typography mixin.

Mixin that optionally emits a modifier class — pattern?

Debugging: mixin undefined after @use migration.

Should mixins contain @extend?

Compare mixins to CSS @apply (Tailwind) philosophically.

Architecture: public mixin API for an SCSS library.

Lead: reduce mixin sprawl across 50 repos.

Output thinking: @mixin center { display:flex; justify-content:center; align-items:center; } then .hero { @include center; } ?

What can SCSS functions do vs mixins?

Why math.div instead of / for division?

How do map.get / map.merge support token systems?

Color functions in modern Sass — guidance?

Write a function that returns a spacing token by name.

When to @error vs @warn in functions?

List/map iteration functions — practical use?

Debugging: function returns unexpected null.

Can functions replace design-token packages?

Interpolation inside functions — care?

Compare SCSS functions to CSS calc/min/max/clamp.

Scenario: theme function must support dark/light.

Lead: standardize Sass function libraries across brands.

What is meta.type-of / inspection used for?

What is an SCSS partial?

@use vs @import for partials — why migrate?

What does @forward do?

How do you configure a module with @use ... with?

Circular dependency between partials — symptoms?

Folder structure for scalable SCSS partials?

Scenario: CSS duplication after splitting partials.

Should partials emit CSS when loaded?

Debugging: styles missing because partial not used.

How do Sass load paths help monorepos?

Partials vs CSS modules co-existence?

Naming conventions for partials?

Lead: migrate a 10-year @import codebase to @use/@forward.

What belongs in a public SCSS package entrypoint?

What is ITCSS and how does it apply to SCSS?

BEM with SCSS — recommended nesting style?

How do you structure theming for white-label products?

Utility-first vs component SCSS — coexistence rules?

Where should global resets live?

Scenario: marketing site and app shell share SCSS kit but diverge visually.

How does specificity budgeting work in SCSS architecture?

Design system package versioning for SCSS?

CSS Modules + SCSS architecture pitfalls?

When to prefer plain CSS over SCSS in modern apps?

Documentation standards for SCSS architecture?

Lead: consolidate three divergent SCSS stacks post-merger.

How do critical CSS and SCSS architecture interact?

Ownership model: who approves new global tokens?

How can SCSS architecture affect CSS performance?

Does nesting depth hurt runtime performance?

How do you prevent unused SCSS from shipping?

Scenario: compiled CSS is 2MB from Sass maps generating every color utility.

@extend performance/maintainability concerns?

Sass compile time too slow in CI — fixes?

Critical rendering path: how SCSS delivery strategy helps?

Are complex :nth-child selectors from SCSS loops costly?

CSS containment / content-visibility vs SCSS role?

Duplicated media queries from nested @media — problem?

How do source maps relate to SCSS performance debugging?

Lead: set a CSS performance budget for Sass-heavy apps.

When do icon fonts in SCSS pipelines hurt performance?

Best practice: token CSS variables vs generating many color classes?