CSS custom properties vs SASS variables - Hands-On Comparison

Using CSS Custom Properties and SASS Variables

📖 Scenario: You are creating a simple webpage style where colors and font sizes are controlled by variables. You want to see how CSS custom properties and SASS variables work differently.

🎯 Goal: Build a stylesheet that uses both CSS custom properties and SASS variables to style a heading and a paragraph. You will define colors and font sizes using both methods and apply them to the text.

📋 What You'll Learn

Create CSS custom properties for --main-color and --main-font-size with exact values

Create SASS variables $secondary-color and $secondary-font-size with exact values

Use the CSS custom properties to style the h1 color and font size

Use the SASS variables to style the p color and font size

💡 Why This Matters

🌍 Real World

Web developers often use CSS custom properties and SASS variables to manage colors and fonts consistently across a website.

💼 Career

Understanding the difference between CSS custom properties and SASS variables helps developers write flexible and maintainable stylesheets.

1

Define CSS custom properties

Create a :root selector and inside it define CSS custom properties --main-color with value #3498db and --main-font-size with value 2rem.

SASS

:root {
  /* Define CSS custom properties here */
}

Hint

Use the :root selector to define CSS variables with -- prefix.

2

Create SASS variables

Create two SASS variables: $secondary-color with value #e74c3c and $secondary-font-size with value 1.2rem.

SASS

:root {
  --main-color: #3498db;
  --main-font-size: 2rem;
}

// Define SASS variables here

Hint

Use $ to start SASS variable names and assign values with a colon.

3

Use CSS custom properties in h1

Write a CSS rule for h1 that sets color to the CSS custom property --main-color and font-size to --main-font-size using the var() function.

SASS

:root {
  --main-color: #3498db;
  --main-font-size: 2rem;
}

$secondary-color: #e74c3c;
$secondary-font-size: 1.2rem;

h1 {
  /* Use CSS custom properties here */
}

Hint

Use var(--variable-name) to access CSS custom properties inside CSS rules.

4

Use SASS variables in p

Write a CSS rule for p that sets color to the SASS variable $secondary-color and font-size to $secondary-font-size.

SASS

:root {
  --main-color: #3498db;
  --main-font-size: 2rem;
}

$secondary-color: #e74c3c;
$secondary-font-size: 1.2rem;

h1 {
  color: var(--main-color);
  font-size: var(--main-font-size);
}

p {
  /* Use SASS variables here */
}

Hint

Use SASS variables directly by their names with $ inside CSS rules.

Practice

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