Bird
Raised Fist0
SASSmarkup~5 mins

CSS custom properties vs SASS variables

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

CSS custom properties and SASS variables both store values to reuse in styles. They help keep code clean and easy to change.

When you want to reuse colors or sizes in many places in your styles.
When you want to change a value in one place and update all related styles automatically.
When you want to create themes that can change dynamically in the browser.
When you want to use variables during development before CSS is generated.
When you want to support older browsers that don't understand CSS variables.
Syntax
SASS
/* CSS custom property */
:root {
  --main-color: #3498db;
}

/* SASS variable */
$main-color: #3498db;

CSS custom properties start with two dashes and live inside selectors like :root.

SASS variables start with a dollar sign and are used in SASS files before compiling to CSS.

Examples
CSS custom property --padding is defined and used with var(--padding).
SASS
:root {
  --padding: 1rem;
}

.box {
  padding: var(--padding);
}
SASS variable $padding is defined and used directly in styles.
SASS
$padding: 1rem;

.box {
  padding: $padding;
}
CSS custom properties can be changed dynamically in the browser with JavaScript.
SASS
:root {
  --color: red;
}

.button {
  color: var(--color);
}

/* Later in JS, you can change --color dynamically */
SASS variables are fixed when CSS is generated and cannot change in the browser.
SASS
$color: red;

.button {
  color: $color;
}

/* SASS variables cannot change after compilation */
Sample Program

This example shows how CSS custom properties define colors in :root and are used in styles. The background and text colors come from the variables.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Custom Properties vs SASS Variables</title>
  <style>
    :root {
      --main-bg-color: #f0f8ff;
      --main-text-color: #333;
    }

    body {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      font-family: Arial, sans-serif;
      padding: 2rem;
    }

    .box {
      background-color: var(--main-text-color);
      color: var(--main-bg-color);
      padding: 1rem;
      border-radius: 0.5rem;
      max-width: 300px;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <h1>Using CSS Custom Properties</h1>
  <div class="box">This box uses CSS custom properties for colors.</div>
</body>
</html>
OutputSuccess
Important Notes

CSS custom properties work in the browser and can be changed with JavaScript.

SASS variables exist only during development and are replaced with actual values when CSS is created.

Use CSS custom properties for dynamic theming and SASS variables for static values during build.

Summary

CSS custom properties are live in the browser and start with --.

SASS variables start with $ and are replaced before the browser sees the CSS.

Choose CSS variables for dynamic changes and SASS variables for fixed values during development.

Practice

(1/5)
1. Which of the following is true about CSS custom properties compared to SASS variables?
easy
A. SASS variables start with -- and are dynamic in the browser.
B. SASS variables start with -- and work in the browser at runtime.
C. CSS custom properties start with $ and are replaced before the browser sees CSS.
D. CSS custom properties start with -- and work in the browser at runtime.

Solution

  1. Step 1: Identify CSS custom properties syntax

    CSS custom properties always start with -- and are live in the browser, meaning they can be changed dynamically.

  2. Step 2: Identify SASS variables syntax and behavior

    SASS variables start with $ and are replaced during the build process, so they don't exist in the browser.

  3. Final Answer:

    CSS custom properties start with -- and work in the browser at runtime. -> Option D

  4. Quick Check:

    CSS variables = -- prefix and runtime [OK]
Hint: CSS vars use -- and work live; SASS vars use $ and compile away [OK]
Common Mistakes:
  • Confusing $ and -- prefixes
  • Thinking SASS variables work in the browser
  • Assuming CSS variables are replaced before runtime
2. Which is the correct way to declare a SASS variable for a color?
easy
A. primary-color: #3498db;
B. --primary-color: #3498db;
C. $primary-color: #3498db;
D. $primary-color == #3498db;

Solution

  1. Step 1: Recall SASS variable syntax

    SASS variables start with $ and use a colon : to assign values.

  2. Step 2: Check each option

    $primary-color: #3498db; uses correct syntax. --primary-color: #3498db; uses the CSS custom property prefix. primary-color: #3498db; omits the $ prefix. $primary-color == #3498db; uses double equals which is invalid.

  3. Final Answer:

    $primary-color: #3498db; -> Option C

  4. Quick Check:

    SASS variable = $name: value; [OK]
Hint: SASS vars start with $ and use colon for assignment [OK]
Common Mistakes:
  • Using -- instead of $ for SASS variables
  • Using == instead of : for assignment
  • Omitting $ prefix
3. Given the following code, what color will the text be in the browser?
:root { --main-color: red; }
.box { color: var(--main-color); }
$main-color: blue;
.box2 { color: $main-color; }
medium
A. Both .box and .box2 text will be red
B. .box text will be red; .box2 text will be blue
C. .box text will be blue; .box2 text will be red
D. Both .box and .box2 text will be blue

Solution

  1. Step 1: Understand CSS custom property usage

    The --main-color is set to red in :root. The class .box uses var(--main-color), so it will be red at runtime.

  2. Step 2: Understand SASS variable usage

    The SASS variable $main-color is blue and used in .box2. This is replaced during compilation, so .box2 color will be blue in the final CSS.

  3. Final Answer:

    .box text will be red; .box2 text will be blue -> Option B

  4. Quick Check:

    CSS var = red; SASS var = blue [OK]
Hint: CSS vars live in browser; SASS vars replaced before browser sees CSS [OK]
Common Mistakes:
  • Thinking SASS variables work at runtime
  • Confusing which variable affects which class
  • Assuming CSS variables are replaced before runtime
4. What is wrong with this SASS code snippet?
$color: green;
.text { color: var($color); }
medium
A. The var() function is only for CSS custom properties, not SASS variables.
B. The variable name should start with -- instead of $.
C. SASS variables cannot be used inside var() function.
D. The color value green is invalid.

Solution

  1. Step 1: Understand var() function usage

    The var() function is a CSS function used only for CSS custom properties (those starting with --).

  2. Step 2: Understand SASS variable usage

    SASS variables start with $ and are used directly without var(). Using var($color) is invalid because var() expects a CSS custom property name.

  3. Final Answer:

    The var() function is only for CSS custom properties, not SASS variables. -> Option A

  4. Quick Check:

    var() = CSS vars only, not SASS [OK]
Hint: Use $var directly in SASS; var() only for CSS custom properties [OK]
Common Mistakes:
  • Using var() with SASS variables
  • Confusing $ and -- prefixes
  • Thinking var() works for SASS variables
5. You want to create a theme where users can switch colors dynamically in the browser. Which approach is best and why?
$primary-color: #0055ff;
:root { --primary-color: #0055ff; }
hard
A. Use CSS custom property --primary-color because it can change dynamically in the browser.
B. Use SASS variable $primary-color because it compiles faster.
C. Use both SASS and CSS variables together for better performance.
D. Use inline styles instead of variables for dynamic changes.

Solution

  1. Step 1: Understand dynamic changes in the browser

    CSS custom properties (starting with --) live in the browser and can be changed with JavaScript or media queries without recompiling CSS.

  2. Step 2: Understand SASS variable limitations

    SASS variables are replaced during build time and cannot change after the CSS is loaded, so they are not suitable for dynamic theming.

  3. Final Answer:

    Use CSS custom property --primary-color because it can change dynamically in the browser. -> Option A

  4. Quick Check:

    Dynamic theme = CSS vars [OK]
Hint: Dynamic changes need CSS vars; SASS vars are static [OK]
Common Mistakes:
  • Choosing SASS variables for runtime changes
  • Thinking both together improve dynamic behavior
  • Ignoring CSS custom properties' runtime flexibility