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 */
}

Need a 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

Need a 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 */
}

Need a 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 */
}

Need a hint?

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