Question 1

What is an SCSS partial?

Accepted Answer

A file named _name.scss intended to be loaded by other files, not compiled standalone. Partials organize code. With modern toolchains, entrypoints @use partials explicitly.

Question 2

@use vs @import for partials — why migrate?

Accepted Answer

@use loads once, namespaces members, and enables configured modules; @import is deprecated and global. Migration is a senior practical topic. Plan namespaces and @forward facades.

Question 3

What does @forward do?

Accepted Answer

Re-exports members from a module as part of your package's public API. Build index facades: @forward 'tokens'; @forward 'mixins'. Hide internals with show/hide.

Question 4

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

Accepted Answer

Pass overrides to !default variables when loading: @use 'theme' with ($brand: #123). Enables per-app theming without globals. Order matters — configure at first load.

Question 5

Circular dependency between partials — symptoms?

Accepted Answer

Load errors or surprising incomplete members; often tokens ↔ mixins cycles. Extract a lower-level tokens module. Dependency direction: tokens → tools → components.

Question 6

Folder structure for scalable SCSS partials?

Accepted Answer

tokens/, tools/ (mixins/functions), base/, components/, pages/ — with a single entry main.scss. Align with ITCSS or similar. Keep component partials isolated. Avoid pages importing each other.

Question 7

Scenario: CSS duplication after splitting partials.

Accepted Answer

Same mixin included via multiple component paths is OK (declarations duplicate) vs accidental double load of side-effect files. Prefer side-effect-free modules. Put global resets only in base entry once.

Question 8

Should partials emit CSS when loaded?

Accepted Answer

Prefer silent modules (only variables/mixins/functions) vs components that emit; control emission from entrypoints. Silent modules compose better. Component partials emit once when used.

Question 9

Debugging: styles missing because partial not used.

Accepted Answer

Entrypoint forgot @use/@forward; or wrong path; or build includes only main. Treat main.scss as the manifest. CI compile check helps.

Question 10

How do Sass load paths help monorepos?

Accepted Answer

Include shared package paths so @use 'design-system/tokens' resolves without brittle relatives. Configure in bundler/sass options. Version the design system package.

Question 11

Partials vs CSS modules co-existence?

Accepted Answer

SCSS partials for global tokens/tools; CSS modules for component-scoped class hashes. Define boundaries clearly. Don't @use heavy globals into every CSS module carelessly.

Question 12

Naming conventions for partials?

Accepted Answer

_tokens.scss, _mixins.scss, component names matching UI; avoid vague _helpers2. Consistency beats cleverness. Index files for folders via @forward.

Question 13

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

Accepted Answer

Incremental facades, compatibility layers, namespace as you go, and ban new @import in lint. Track compile warnings. Don't big-bang without visual regression tests.

Question 14

What belongs in a public SCSS package entrypoint?

Accepted Answer

Forwarded tokens, mixins, functions — not private experimental partials. Semantic versioning for removed forwards. Document peer Sass version.

Partials SCSS Interview Questions

Other SCSS interview topics