Color scale generation in SASS - Mini Project: Build & Apply

Color Scale Generation with Sass

📖 Scenario: You are designing a website theme and want to create a smooth color scale from a base color. This helps keep your design consistent and visually appealing.

🎯 Goal: Build a Sass color scale by generating lighter shades from a base color using Sass functions.

📋 What You'll Learn

Create a Sass variable for the base color

Define a variable for the number of steps in the scale

Use a Sass @for loop to generate lighter shades

Store the generated colors in a Sass map

Output CSS custom properties for each color shade

💡 Why This Matters

🌍 Real World

Color scales are used in web design to create harmonious themes and improve user experience by maintaining consistent colors.

💼 Career

Front-end developers and designers use Sass color scales to speed up styling and keep code maintainable and scalable.

1

Set up the base color variable

Create a Sass variable called $base-color and set it to #3498db (a blue color).

SASS

$base-color: #3498db;
// Your code here

Need a hint?

Use $base-color: #3498db; to define the base color variable.

2

Define the number of steps for the scale

Add a Sass variable called $steps and set it to 5 to represent how many shades you want to generate.

SASS

$base-color: #3498db;
$steps: 5;
// Your code here

Need a hint?

Use $steps: 5; to define the number of color shades.

3

Generate the color scale map

Create a Sass map variable called $color-scale. Use a @for loop from 1 to $steps to generate lighter shades by mixing $base-color with white. Use percentage($i / $steps) as the weight for mixing. Store each shade in $color-scale with keys light-1 to light-5.

SASS

$base-color: #3498db;
$steps: 5;
$color-scale: ();
// Your code here

Need a hint?

Use @for $i from 1 through $steps to loop. Use mix(white, $base-color, $weight) to create lighter shades. Use map-merge to add to the map.

4

Output CSS custom properties for the color scale

Write a :root CSS selector. Inside it, use a @each loop to iterate over $color-scale. For each key and value, output a CSS custom property named --color- followed by the key (e.g., --color-light-1) and set it to the color value.

SASS

$base-color: #3498db;
$steps: 5;
$color-scale: ();
@for $i from 1 through $steps {
  $weight: percentage($i / $steps);
  $shade: mix(white, $base-color, $weight);
  $color-scale: map-merge($color-scale, ("light-#{$i}": $shade));
}
:root {
  // Your code here
}

Need a hint?

Use :root selector and @each $name, $color in $color-scale to output CSS variables.