CSS custom properties vs SASS variables - Trade-offs & Expert Analysis

Overview - CSS custom properties vs SASS variables

What is it?

CSS custom properties and SASS variables are both ways to store values like colors or sizes to reuse them in styles. CSS custom properties are defined directly in CSS and can change dynamically in the browser. SASS variables are part of the SASS preprocessor and are replaced with their values before the CSS reaches the browser. Both help keep styles consistent and easier to update.

Why it matters

Without these variables, you would have to repeat the same values everywhere in your styles. This makes updates slow and error-prone. Imagine changing a brand color used in hundreds of places manually. Variables let you change one place and update everywhere instantly, saving time and avoiding mistakes.

Where it fits

Before learning this, you should know basic CSS syntax and how styles apply to HTML. After this, you can learn about CSS preprocessors, advanced CSS features like calc() and media queries, and JavaScript interaction with CSS variables.

Mental Model

Core Idea

CSS custom properties are live variables in the browser, while SASS variables are static placeholders replaced before the browser sees the styles.

Think of it like...

Think of SASS variables like a recipe written on paper before cooking — you decide all ingredients upfront. CSS custom properties are like adjustable seasoning at the table — you can change the taste anytime while eating.

┌───────────────┐       ┌───────────────┐
│ SASS Compiler │──────▶│ Final CSS File│
└───────────────┘       └───────────────┘
         ▲                      ▲
         │                      │
┌───────────────┐       ┌───────────────┐
│ SASS Variables│       │ CSS Custom    │
│ (Static)      │       │ Properties    │
│ (Preprocessed)│       │ (Dynamic)     │
└───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

What are SASS variables

Concept: SASS variables store values in SASS files and replace them during compilation.

In SASS, you create a variable with a $ sign, like $primary-color: #3498db;. When you use $primary-color in your styles, the compiler replaces it with #3498db before creating the CSS file.

Result

The final CSS has the color #3498db wherever $primary-color was used.

Understanding that SASS variables exist only during development helps you see why they can't change after the page loads.

2

Foundation

What are CSS custom properties

Concept: CSS custom properties are variables defined in CSS that the browser understands and can change dynamically.

You define a CSS custom property with --, like --primary-color: #3498db; inside a selector. You use it with var(--primary-color). The browser keeps these variables live and can update them with JavaScript or media queries.

Result

The page styles use the value of --primary-color, and it can change while the page is open.

Knowing CSS custom properties live in the browser explains why they can respond to user actions or screen size changes.

3

Intermediate

Scope and inheritance differences

🤔Before reading on: do you think SASS variables and CSS custom properties behave the same way with inheritance? Commit to your answer.

Concept: SASS variables have no scope in CSS; CSS custom properties follow CSS rules and inherit through the DOM tree.

SASS variables are replaced everywhere at compile time, so they don't care about selectors or inheritance. CSS custom properties are attached to elements and inherit down the DOM, so their value can change depending on where you use them.

Result

CSS custom properties can have different values on different parts of the page, but SASS variables cannot.

Understanding scope differences helps you decide when to use each variable type for flexible or fixed values.

4

Intermediate

Dynamic updates and runtime changes

🤔Before reading on: can SASS variables change after the page loads like CSS custom properties? Commit to yes or no.

Concept: CSS custom properties can be changed at runtime by JavaScript or media queries; SASS variables cannot.

Because CSS custom properties exist in the browser, scripts can update them to change styles instantly. SASS variables are compiled away, so changing them requires recompiling the CSS and reloading the page.

Result

CSS custom properties enable dynamic theming and responsive design without rebuilding CSS.

Knowing this difference unlocks powerful interactive styling possibilities with CSS custom properties.

5

Intermediate

Fallbacks and compatibility

Concept: CSS custom properties support fallback values; SASS variables do not because they are replaced early.

When using var(--color, fallback), the browser uses fallback if the custom property is missing. SASS variables always have a value at compile time, so no fallback is needed.

Result

CSS custom properties provide safer styling when variables might be missing or undefined.

Understanding fallbacks helps you write more robust CSS that works across browsers and conditions.

6

Advanced

Combining SASS variables with CSS custom properties

🤔Before reading on: do you think SASS variables can set CSS custom properties? Commit to yes or no.

Concept: You can use SASS variables to assign values to CSS custom properties, mixing static and dynamic styles.

In SASS, you write :root { --primary-color: #{$primary-color}; } to set a CSS custom property from a SASS variable. This lets you use SASS for preprocessing and CSS variables for runtime flexibility.

Result

You get the best of both worlds: compile-time constants and runtime adjustable variables.

Knowing how to combine these lets you build scalable, maintainable, and dynamic style systems.

7

Expert

Performance and debugging implications

🤔Before reading on: which variable type impacts browser performance more during runtime? Commit to your answer.

Concept: CSS custom properties can affect runtime performance due to live updates; SASS variables do not because they are static.

Browsers recalculate styles when CSS custom properties change, which can be costly if overused. SASS variables produce simpler CSS, so rendering is faster but less flexible. Debugging CSS custom properties requires inspecting computed styles, while SASS variables disappear after compilation.

Result

Choosing the right variable type affects page speed and ease of debugging in production.

Understanding performance tradeoffs guides expert decisions on when to use dynamic vs static variables.

Under the Hood

SASS variables exist only during the build step. The SASS compiler replaces all variable references with their values, producing plain CSS. CSS custom properties are part of the CSS Object Model in the browser. They are stored in the style tree and can be inherited, updated, and recalculated live by the browser's rendering engine.

Why designed this way?

SASS variables were created to add programming features to CSS before browsers supported variables. CSS custom properties were designed later to enable dynamic styling and theming directly in the browser without preprocessing. This separation allows developers to choose static or dynamic approaches based on needs.

SASS Compilation Flow:
┌───────────────┐
│ SASS Source   │
│ ($variables)  │
└──────┬────────┘
       │ Compile
       ▼
┌───────────────┐
│ CSS Output    │
│ (no variables)│
└───────────────┘

Browser Runtime:
┌───────────────┐
│ CSS with      │
│ custom props  │
└──────┬────────┘
       │ Apply styles
       ▼
┌───────────────┐
│ Rendered Page │
│ (dynamic vars)│
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do CSS custom properties work in all browsers exactly like SASS variables? Commit yes or no.

Common Belief: CSS custom properties behave exactly like SASS variables and work everywhere.

Reality: CSS custom properties require modern browsers and behave differently because they are live and scoped, unlike static SASS variables.

Why it matters: Assuming full compatibility can cause styles to break or behave unexpectedly on older browsers.

Quick: Can you change a SASS variable value after the page loads? Commit yes or no.

Common Belief: SASS variables can be changed dynamically in the browser like CSS custom properties.

Reality: SASS variables are replaced at build time and cannot change after the CSS is loaded.

Why it matters: Trying to use SASS variables for dynamic theming leads to confusion and wasted effort.

Quick: Do CSS custom properties always improve performance? Commit yes or no.

Common Belief: Using CSS custom properties always makes your site faster and more efficient.

Reality: CSS custom properties can slow down rendering if overused or changed frequently because the browser recalculates styles.

Why it matters: Ignoring performance costs can cause slow or janky user experiences.

Quick: Are SASS variables and CSS custom properties interchangeable in all cases? Commit yes or no.

Common Belief: You can freely swap SASS variables and CSS custom properties without changing your code.

Reality: They serve different purposes and have different lifecycles; swapping them blindly breaks styles or functionality.

Why it matters: Misusing variables leads to bugs and harder maintenance.

Expert Zone

1

CSS custom properties can be animated and transitioned, enabling smooth visual effects that SASS variables cannot provide.

2

SASS variables can store complex data like maps and lists, which CSS custom properties cannot represent, allowing more powerful preprocessing logic.

3

Using CSS custom properties with media queries enables responsive design patterns that adapt styles dynamically without recompiling CSS.

When NOT to use

Avoid CSS custom properties when targeting very old browsers or when performance is critical and styles do not need to change at runtime. Use SASS variables for static, complex preprocessing logic that CSS alone cannot handle.

Production Patterns

In production, teams often use SASS variables for base theming and CSS custom properties for runtime theming and user preferences. This hybrid approach balances performance and flexibility. Also, CSS custom properties are used for dark mode toggles and responsive spacing.

Connections

JavaScript DOM manipulation

CSS custom properties can be changed dynamically by JavaScript to update styles live.

Knowing how CSS variables interact with JavaScript helps build interactive, themeable web apps.

Build tools and preprocessors

SASS variables are part of preprocessing, which happens before deployment, unlike runtime CSS variables.

Understanding build steps clarifies when and how styles are generated and applied.

Real-time systems in engineering

CSS custom properties act like real-time adjustable parameters, similar to control knobs in engineering systems.

Seeing CSS variables as live controls helps grasp their dynamic nature and impact on system behavior.

Common Pitfalls

#1 Trying to update SASS variables in the browser to change styles dynamically.

Wrong approach:

document.styleSheets[0].$primary-color = '#ff0000'; // wrong, no effect

Correct approach:

document.documentElement.style.setProperty('--primary-color', '#ff0000'); // correct for CSS custom properties

Root cause:

Confusing compile-time SASS variables with runtime CSS custom properties.

#2 Defining CSS custom properties outside any selector and expecting them to inherit everywhere automatically.

Wrong approach:

--main-color: #333333; /* outside any selector */
body { color: var(--main-color); }

Correct approach:

:root { --main-color: #333333; }
body { color: var(--main-color); }

Root cause:

Not understanding that CSS custom properties must be defined inside selectors to be valid.

#3 Using SASS variables inside media queries expecting them to change dynamically with screen size.

Wrong approach:

@media (max-width: 600px) { color: $small-screen-color; }

Correct approach:

@media (max-width: 600px) { color: var(--small-screen-color); }

Root cause:

Expecting SASS variables to respond to runtime conditions instead of compile-time.

Key Takeaways

SASS variables are static placeholders replaced during build time, while CSS custom properties are live variables managed by the browser.

CSS custom properties support dynamic updates, inheritance, and fallbacks, enabling responsive and interactive designs.

Combining SASS variables with CSS custom properties allows powerful, maintainable, and flexible styling systems.

Misunderstanding their differences leads to bugs, performance issues, and maintenance challenges.

Expert use balances static preprocessing with runtime flexibility to optimize performance and user experience.