What are variables in SASS?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of HTML & CSS conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
Variables in Sass (SCSS) store reusable styling values (colors, spacing units, fonts) identified by a dollar sign ($) prefix:
// Definition
$primary-blue: #2563eb;
$font-stack: 'Inter', system-ui, sans-serif;
$border-radius-lg: 12px;
// Usage
.hero-card {
background-color: $primary-blue;
font-family: $font-stack;
border-radius: $border-radius-lg;
}
### Difference Between Sass Variables and Native CSS Custom Properties:
- Sass Variables (
$var): Evaluated at build time. Once compiled to CSS, they become static values. Cannot be dynamically changed via JavaScript at runtime or affected by DOM cascading. - CSS Custom Properties (
--var): Evaluated dynamically by the browser engine at runtime. They participate in the cascade and can be modified on the fly in JavaScript or media queries.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.