Color values and manipulation in SASS - Mini Project: Build & Apply

Color Values and Manipulation with Sass

📖 Scenario: You are designing a simple webpage with a colored box. You want to use Sass to manage colors easily and create a lighter shade of your main color for a hover effect.

🎯 Goal: Build a Sass stylesheet that defines a base color variable, creates a lighter version of that color, and applies these colors to a box and its hover state.

📋 What You'll Learn

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

Create a Sass variable named $light-color that is a lighter version of $base-color by 30%.

Write a CSS rule for a class .color-box that sets the background color to $base-color.

Add a :hover state for .color-box that changes the background color to $light-color.

💡 Why This Matters

🌍 Real World

Using variables and color functions in Sass helps keep your website colors consistent and easy to update.

💼 Career

Front-end developers often use Sass to manage styles efficiently, especially for color themes and interactive effects.

1

Define the base color variable

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

SASS

# Define the base color variable
# Your code here

Hint

Use the syntax $variable-name: value; to create a Sass variable.

2

Create a lighter color variable

Create a Sass variable called $light-color that is a lighter version of $base-color by 30% using the lighten() function.

SASS

$base-color: #3498db;
# Create a lighter color variable called $light-color
# Your code here

Hint

Use lighten($color, percentage) to make a color lighter.

3

Style the color box with base color

Write a CSS rule for the class .color-box that sets the background-color property to the Sass variable $base-color.

SASS

$base-color: #3498db;
$light-color: lighten($base-color, 30%);

# Write CSS for .color-box with background-color $base-color
# Your code here

Hint

Use .class-name { property: value; } syntax and refer to variables with $variable-name.

4

Add hover effect with lighter color

Add a :hover state to the .color-box CSS rule that changes the background-color to the Sass variable $light-color.

SASS

$base-color: #3498db;
$light-color: lighten($base-color, 30%);

.color-box {
  background-color: $base-color;
  
  # Add :hover state to change background-color to $light-color
  # Your code here
}

Hint

Use &:hover { ... } inside the class rule to add hover styles in Sass.

Practice

1. Which Sass function would you use to make a color lighter?

easy

A. rgba()

B. darken()

C. lighten()

D. mix()

Solution

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

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

2. Step 2: Compare with other functions

   darken() makes colors darker, rgba() changes transparency, and mix() blends two colors.

3. Final Answer:

   lighten() -> Option C

4. Quick Check:

   Make color lighter = lighten() [OK]

Hint: Lighten means increase brightness, so use lighten() [OK]

Common Mistakes:

• Confusing lighten() with darken()
• Using rgba() to change brightness
• Mixing colors instead of lightening

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

easy

A. darken(#ff0000, '20%')

B. darken(#ff0000 20%)

C. darken(#ff0000; 20%)

D. darken(#ff0000, 20%)

Solution

1. Step 1: Check function syntax

   The darken() function takes two arguments separated by a comma: a color and a percentage without quotes.

2. Step 2: Validate each option

   darken(#ff0000, 20%) uses a comma and percentage without quotes, which is correct. Options B and C miss the comma or use wrong separators. darken(#ff0000, '20%') uses quotes around percentage, which is invalid.

3. Final Answer:

   darken(#ff0000, 20%) -> Option D

4. Quick Check:

   Correct syntax uses comma and percentage without quotes [OK]

Hint: Use comma between color and percentage, no quotes on percent [OK]

Common Mistakes:

• Omitting comma between arguments
• Putting percentage in quotes
• Using semicolon instead of comma

3. What color will this Sass code produce?

$base: #0000ff;
$mix-color: #ff0000;
$result: mix($base, $mix-color, 50%);

medium

A. #ff0000 (red)

B. #800080 (purple)

C. #0000ff (blue)

D. #808000 (olive)

Solution

1. Step 1: Understand mix() function

   The mix() function blends two colors by a given weight. 50% means equal parts of both colors.

2. Step 2: Mix blue and red equally

   Mixing pure blue (#0000ff) and pure red (#ff0000) equally results in purple (#800080).

3. Final Answer:

   #800080 (purple) -> Option B

4. Quick Check:

   Mix blue + red equally = purple [OK]

Hint: Mix equal red and blue = purple [OK]

Common Mistakes:

• Thinking mix returns original color
• Confusing olive with purple
• Ignoring the 50% weight in mix()

4. Identify the error in this Sass code:

$color: lighten(#123456 10%);

medium

A. Missing comma between color and percentage

B. Percentage should be negative

C. Color hex code is invalid

D. lighten() cannot take percentages

Solution

1. Step 1: Check lighten() function syntax

   The lighten() function requires two arguments separated by a comma: a color and a percentage.

2. Step 2: Identify missing comma

   The code uses a space instead of a comma between #123456 and 10%, causing a syntax error.

3. Final Answer:

   Missing comma between color and percentage -> Option A

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Check commas between function arguments [OK]

Common Mistakes:

• Using space instead of comma between arguments
• Thinking percentage must be negative
• Believing lighten() can't take percentages

5. You want to create a button background color that is 30% lighter than a base color $primary: #0066cc; and add 50% transparency. Which Sass code correctly does this?

hard

A. $button-bg: rgba(lighten($primary, 30%), 0.5);

B. $button-bg: lighten(rgba($primary, 0.5), 30);

C. $button-bg: lighten($primary, 30%, 0.5);

D. $button-bg: rgba($primary, lighten(30%, 0.5));

Solution

1. Step 1: Lighten the base color first

   Use lighten($primary, 30%) to increase brightness by 30%.

2. Step 2: Add transparency with rgba()

   Wrap the lightened color in rgba(..., 0.5) to set 50% opacity.

3. Step 3: Check other options

   $button-bg: lighten(rgba($primary, 0.5), 30); uses amount without % unit, which is invalid. $button-bg: lighten($primary, 30%, 0.5); uses wrong argument count. $button-bg: rgba($primary, lighten(30%, 0.5)); misuses rgba() arguments.

4. Final Answer:

   $button-bg: rgba(lighten($primary, 30%), 0.5); -> Option A

5. Quick Check:

   Lighten first, then add transparency [OK]

Hint: Lighten color first, then wrap with rgba() for transparency [OK]

Common Mistakes:

• Adding transparency before lightening
• Passing wrong number of arguments
• Misordering function calls