Lighten and darken functions in SASS - Mini Project: Build & Apply

Lighten and Darken Colors with Sass

📖 Scenario: You are creating a simple style sheet for a website. You want to use Sass functions to make colors lighter or darker easily. This helps keep your design consistent and easy to update.

🎯 Goal: Build a Sass file that defines a base color, sets a percentage for lightening and darkening, then uses the lighten() and darken() functions to create lighter and darker color variants. Finally, apply these colors to CSS classes.

📋 What You'll Learn

Create a variable $base-color with the exact value #3498db

Create a variable $change-percent with the exact value 20%

Use the lighten() function with $base-color and $change-percent to create $light-color

Use the darken() function with $base-color and $change-percent to create $dark-color

Create CSS classes .light and .dark that use $light-color and $dark-color as background colors respectively

💡 Why This Matters

🌍 Real World

Designers and developers often need to create color palettes with consistent light and dark shades for buttons, backgrounds, and themes.

💼 Career

Knowing how to use Sass functions like lighten() and darken() helps you write maintainable and scalable CSS for professional web projects.

1

Create the base color variable

Create a Sass variable called $base-color and set it to the hex color #3498db.

SASS

# Create the base color variable
# Your code here

Hint

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

2

Create the percentage variable for color change

Create a Sass variable called $change-percent and set it to 20%.

SASS

$base-color: #3498db;
# Create the percentage variable for lightening and darkening
# Your code here

Hint

Use $change-percent: 20%; to define the percentage variable.

3

Create lighter and darker color variables using lighten() and darken()

Create a variable $light-color using lighten($base-color, $change-percent) and a variable $dark-color using darken($base-color, $change-percent).

SASS

$base-color: #3498db;
$change-percent: 20%;
# Create $light-color using lighten() and $dark-color using darken()
# Your code here

Hint

Use lighten($base-color, $change-percent) and darken($base-color, $change-percent) to create the new color variables.

4

Apply the colors to CSS classes

Create CSS classes .light and .dark. Set the background color of .light to $light-color and the background color of .dark to $dark-color.

SASS

$base-color: #3498db;
$change-percent: 20%;
$light-color: lighten($base-color, $change-percent);
$dark-color: darken($base-color, $change-percent);

/* Create .light and .dark classes with background colors */
# Your code here

Hint

Use .light { background-color: $light-color; } and .dark { background-color: $dark-color; } to style the classes.

Practice

1. What does the lighten() function do in Sass?

easy

A. Changes a color to grayscale

B. Makes a color darker by decreasing its brightness

C. Inverts the color completely

D. Makes a color lighter by increasing its brightness

Solution

1. Step 1: Understand the purpose of lighten()

   The lighten() function increases the lightness of a color, making it appear lighter.

2. Step 2: Compare with other options

   Other options describe darkening, grayscale, or inversion, which are not what lighten() does.

3. Final Answer:

   Makes a color lighter by increasing its brightness -> Option D

4. Quick Check:

   lighten() = makes color lighter [OK]

Hint: Lighten means make color brighter or lighter [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Thinking lighten() changes color hue
• Assuming lighten() inverts colors

2. Which of the following is the correct syntax to darken a color by 20% in Sass?

easy

A. darken(20%, #3498db)

B. darken(#3498db 20%)

C. darken(#3498db, 20%)

D. darken(#3498db; 20%)

Solution

1. Step 1: Recall function syntax

   The darken() function takes two arguments: a color and a percentage, in that order, separated by a comma.

2. Step 2: Check each option

   darken(#3498db, 20%) matches the correct syntax: darken(#3498db, 20%). Others have wrong order or missing comma/semicolon.

3. Final Answer:

   darken(#3498db, 20%) -> Option C

4. Quick Check:

   darken(color, percent) syntax [OK]

Hint: Function args: color first, then percentage with comma [OK]

Common Mistakes:

• Swapping argument order
• Omitting comma between arguments
• Using semicolon instead of comma

3. What color will be produced by this Sass code?

$base-color: #800000;
$light-color: lighten($base-color, 50%);
body { background-color: $light-color; }

medium

A. A very dark red color

B. A very light pinkish color

C. Pure white

D. Bright green

Solution

1. Step 1: Understand lighten effect on #800000

   The base color #800000 is a dark red. Lightening it by 50% will add a lot of white, making it much lighter and pinkish.

2. Step 2: Eliminate other options

   It won't be dark (B), pure white (C), or green (D) because lighten only adds lightness to the original red color.

3. Final Answer:

   A very light pinkish color -> Option B

4. Quick Check:

   lighten dark red by 50% = light pink [OK]

Hint: Lighten dark red by 50% = light pinkish color [OK]

Common Mistakes:

• Thinking lighten makes color darker
• Confusing lighten with color inversion
• Expecting pure white after lighten

4. Identify the error in this Sass code:

$color: #123456;
$dark: darken($color 30%);
.button { background: $dark; }

medium

A. Missing comma between arguments in darken()

B. Invalid color code #123456

C. darken() cannot be used inside variables

D. Percentage should be without % sign

Solution

1. Step 1: Check darken() function syntax

   The darken() function requires a comma between the color and percentage arguments.

2. Step 2: Identify the missing comma

   In the code, darken($color 30%) lacks a comma, causing a syntax error.

3. Final Answer:

   Missing comma between arguments in darken() -> Option A

4. Quick Check:

   darken(color, percent) needs comma [OK]

Hint: Remember comma separates arguments in functions [OK]

Common Mistakes:

• Omitting comma between function arguments
• Using invalid color codes
• Removing % sign from percentage

5. You want to create a button with a base blue color #007BFF. On hover, the button should become 15% darker. Which Sass code correctly achieves this with variables and hover style?

hard

A. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: darken($btn-color, 15%);
}
}

B. $btn-color: #007BFF;
.button {
background-color: darken($btn-color, 15%);
&:hover {
background-color: $btn-color;
}
}

C. $btn-color: #007BFF;
.button {
background-color: lighten($btn-color, 15%);
&:hover {
background-color: darken($btn-color, 15%);
}
}

D. $btn-color: #007BFF;
.button {
background-color: $btn-color;
&:hover {
background-color: lighten($btn-color, 15%);
}
}

Solution

1. Step 1: Set base color variable

   The variable $btn-color is set to the base blue color #007BFF.

2. Step 2: Apply base color and darken on hover

   The button background uses $btn-color normally, and on hover uses darken($btn-color, 15%) to make it 15% darker.

3. Step 3: Verify hover effect logic

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   correctly darkens on hover.

   $btn-color: #007BFF;
   .button {
     background-color: darken($btn-color, 15%);
     &:hover {
       background-color: $btn-color;
     }
   }

   reverses colors.

   $btn-color: #007BFF;
   .button {
     background-color: lighten($btn-color, 15%);
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   lightens base color incorrectly.

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: lighten($btn-color, 15%);
     }
   }

   lightens on hover instead of darkening.

4. Final Answer:

   Code with base $btn-color and darken on hover -> Option A

5. Quick Check:

   Hover darken 15% =

   $btn-color: #007BFF;
   .button {
     background-color: $btn-color;
     &:hover {
       background-color: darken($btn-color, 15%);
     }
   }

   [OK]

Hint: Hover darker means darken() inside &:hover [OK]

Common Mistakes:

• Swapping lighten and darken functions
• Applying darken on base instead of hover
• Forgetting to use & for hover selector