Sass interviews cover variables, nesting, mixins, and how preprocessors compile to CSS teams still maintain at scale.
Know the difference between SCSS and indented Sass syntax, how partials and @use/@forward replace deprecated @import, and how variables, nesting, and mixins reduce repetition without exploding specificity.
Senior questions touch build pipelines (dart-sass), design tokens vs CSS custom properties, when to migrate toward native CSS, and avoiding deep nesting that mirrors HTML structure and creates brittle overrides.
Quick answers you can expand in a real interview.
| Topic | Short answer |
|---|---|
| Modern module system | @use and @forward replace @import |
| Private members | Prefix with - or _ in @use modules |
| Mixin vs extend | Mixin copies rules; @extend groups selectors |
| Default variable | $color: blue !default in partials |
| Compile command | sass input.scss output.css |
| Map helpers | map.get($tokens, "primary") in modern Sass |
Use the short version first, then offer trade-offs if the interviewer wants depth.
Sass is a CSS preprocessor that adds variables, nesting, mixins, functions, and modules, then compiles to standard CSS browsers understand. SCSS uses CSS-like braces; indented Sass omits them. Teams use it to organize large stylesheets and share design tokens before native CSS caught up.
@import duplicated globals and made load order fragile—deprecated in favor of @use, which loads a module once with namespaced members (use "colors" as c). @forward re-exports a module API for barrel files. @use improves encapsulation and compile performance.
Sass variables ($primary) are compile-time—they disappear in output CSS. CSS custom properties (--primary) exist at runtime and cascade, enabling theming per component or media query. Modern codebases often use Sass for build-time tokens and CSS variables for runtime theme switching.
Mixins @mixin flex-center { display: flex; align-items: center; } accept arguments and output rules wherever @include is called—flexible but can bloat CSS if overused. @extend reuses selector groups, which can create unexpected long compound selectors; mixins are safer for parameterized patterns.
Deep nesting mirrors HTML structure and inflates specificity, making overrides harder (.nav ul li a span). Best practice: nest only for pseudo-states and direct child context, rarely more than three levels. Flat BEM-style classes often beat deep Sass nesting in maintainability.
Partials start with underscore (_buttons.scss) and are imported via @use without generating standalone CSS files. Structure by abstracts (variables, mixins), components, layout, and pages. Entry file (main.scss) @use modules in dependency order.
Assigning $brand: #333 !default sets the value only if not already defined—useful in theme partials consumers override before @use. It supports library-style Sass packages where apps customize tokens without editing vendor files.
@each iterates lists or maps—common for generating utility classes from a spacing map. @for counts between bounds for grid columns. @while loops until a condition fails—use sparingly. Loops generate repetitive CSS at compile time; guard output size in design systems.
Dart Sass is the canonical implementation, run via sass CLI, Vite/Webpack loaders, or framework integrations. It outputs CSS plus optional source maps for debugging. node-sass (LibSass) is deprecated—always specify dart-sass in interviews.
%btn-base { padding: 0.5rem; } holds rules extended by other selectors without generating a standalone class until extended. @extend .btn or @extend %btn-base groups selectors in output. Over-extending creates unmaintainable selector lists—prefer mixins for shared parameterized blocks.
Define $colors: (primary: #0066cc, danger: #cc0000) and access via map.get($colors, primary) in modern module syntax. Pass maps to mixins for consistent spacing scales. Document token names because compile-time maps do not auto-sync to Figma without discipline.
Sass adds language features at authoring time. PostCSS transforms CSS with plugins (autoprefixer, preset-env) often after Sass compilation. Many pipelines run Sass first, then PostCSS. Choose Sass for variables/mixins architecture; PostCSS for future CSS polyfills and linting.
Prefer single-class BEM components, limit nesting depth, avoid tag selectors in nested rules, and use mixins for repeated declarations instead of chaining extends. Regular audits with stylelint and specificity calculators catch runaway selectors early.
@mixin respond($breakpoint) { @media (min-width: $breakpoint) { @content; } } lets callers pass a block: @include respond(768px) { .grid { columns: 2; } }. It is the Sass equivalent of higher-order mixins for media queries and themes.
Native CSS now has variables, nesting (in modern browsers), @layer, and color functions. Evaluate if Sass only wraps features CSS provides—migration reduces build steps. Keep Sass when heavy mixins, map-driven generation, or legacy design systems depend on it until a phased CSS-first plan exists.
Pro Tip
Mention limiting nesting depth and BEM naming—senior interviews connect Sass features to long-term CSS maintainability.