Question 1

What can SCSS functions do vs mixins?

Accepted Answer

Functions return values (colors, numbers, lists) used in properties; they should not emit CSS side effects. Keep functions pure. Built-ins live under sass:math, sass:color, sass:map, etc. modules.

Question 2

Why math.div instead of / for division?

Accepted Answer

Slash became ambiguous (also separator); sass:math.div is explicit and future-proof. Migrate legacy / division. Enable warnings during upgrades.

Question 3

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

Accepted Answer

Read and compose token maps without hard-coding keys everywhere; merge themes. Fail loudly on missing keys via custom getters that @error. Prevents silent nulls.

Question 4

Color functions in modern Sass — guidance?

Accepted Answer

Prefer sass:color APIs; many legacy darken/lighten are deprecated in favor of clearer color-space aware functions. Design systems often compute on OKLCH/CSS color and limit Sass color math. Know deprecations for interviews.

Question 5

Write a function that returns a spacing token by name.

Accepted Answer

Accept key, look up in $spacers map, @error if missing, return value. Centralizes failures at compile time — better than emitting invalid CSS.

Question 6

When to @error vs @warn in functions?

Accepted Answer

@error fails the build for invalid API use; @warn for deprecations/migrations. Libraries should @error on bad keys. Don't warn-spam on every include.

Question 7

List/map iteration functions — practical use?

Accepted Answer

Generate utility classes, CSS variables, or variant selectors from data structures. Data-driven CSS beats copy-paste. Keep generators readable and documented.

Question 8

Debugging: function returns unexpected null.

Accepted Answer

Missing map key, wrong namespace, or using deprecated color ops that behave differently. Add guards. Unit-test Sass with True/sass-true if critical.

Question 9

Can functions replace design-token packages?

Accepted Answer

They can encapsulate access, but source tokens should still be data (maps/JSON) owned centrally. Functions are API; maps are data. Don't bury tokens only inside opaque functions without export.

Question 10

Interpolation inside functions — care?

Accepted Answer

Functions primarily return values; building selectors usually belongs in mixins/loops. Keep responsibilities clear to avoid unreadable meta-CSS.

Question 11

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

Accepted Answer

SCSS resolves at build time with known tokens; CSS computes at runtime with relative units/layout. Use clamp for fluid type in CSS; use Sass for token algebra known at build.

Question 12

Scenario: theme function must support dark/light.

Accepted Answer

Pass theme map or use CSS variables for runtime; Sass function can select compile-time theme builds. Multiple theme CSS files vs one file with CSS vars — choose per product needs.

Question 13

Lead: standardize Sass function libraries across brands.

Accepted Answer

Shared sass toolkit package, documented function contracts, deprecation policy, and CI compiling sample consumers. Breakages ripple widely — semantic versioning required.

Question 14

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

Accepted Answer

Guard arguments in public functions (ensure map/number) before computing. Defensive library APIs. Pair with clear @error messages.

Functions SCSS Interview Questions

Other SCSS interview topics