Why programmatic color control matters in SASS - See It in Action

Why Programmatic Color Control Matters

📖 Scenario: You are creating a simple webpage that uses colors for different sections. Instead of writing colors directly everywhere, you want to control colors using variables. This helps you change colors easily later.

🎯 Goal: Build a Sass stylesheet that uses variables to control colors for a header and a main section. Then use a variable to adjust the main section's background color shade programmatically.

📋 What You'll Learn

Create Sass variables for $header-color and $main-color with exact color values

Create a variable $shade-factor to control how much the main color is darkened

Use the darken() function with $shade-factor to set the main section background color

Apply the colors to header and main selectors using the variables

💡 Why This Matters

🌍 Real World

Web designers and developers often need to update site colors quickly and keep them consistent. Using variables and functions in Sass helps manage colors efficiently.

💼 Career

Knowing how to control colors programmatically is a key skill for front-end developers and UI designers working with CSS preprocessors like Sass.

1

Create color variables

Create two Sass variables: $header-color with the value #3498db and $main-color with the value #2ecc71.

SASS

// Create variables $header-color and $main-color with exact hex values
// Your code here

Need a hint?

Use $variable-name: value; syntax to create variables in Sass.

2

Add shade factor variable

Add a Sass variable called $shade-factor and set it to 10% to control how much the main color will be darkened.

SASS

$header-color: #3498db;
$main-color: #2ecc71;
// Create variable $shade-factor with value 10%
// Your code here

Need a hint?

Percent values in Sass variables are written as 10%.

3

Use variables in selectors

Write CSS rules for header and main. Set header background color to $header-color. For main, set background color to the darkened version of $main-color using the darken() function with $shade-factor.

SASS

$header-color: #3498db;
$main-color: #2ecc71;
$shade-factor: 10%;

// Write header and main selectors with background colors
// Your code here

Need a hint?

Use selector { background-color: variable_or_function; } syntax.

4

Complete with comments explaining color control

Add comments above the variables explaining why using variables for colors is helpful for easy updates and consistent design.

SASS

// Add comments explaining the benefit of color variables
$header-color: #3498db;
$main-color: #2ecc71;
$shade-factor: 10%;

header {
  background-color: $header-color;
}

main {
  background-color: darken($main-color, $shade-factor);
}

Need a hint?

Write comments using // comment text syntax in Sass.