RGBA and opacity manipulation in SASS - Mini Project: Build & Apply

RGBA and Opacity Manipulation with Sass

📖 Scenario: You are designing a simple webpage with colored boxes. You want to control the transparency of these boxes using RGBA colors and opacity in Sass.

🎯 Goal: Create a Sass stylesheet that defines base colors, sets opacity levels using RGBA, and applies these styles to boxes on the webpage.

📋 What You'll Learn

Define base colors as variables in Sass

Create opacity variables for different transparency levels

Use RGBA function to combine base colors with opacity

Apply the RGBA colors to CSS classes for colored boxes

💡 Why This Matters

🌍 Real World

Web designers often need to control transparency of colors for overlays, buttons, and backgrounds to create visually appealing layouts.

💼 Career

Understanding how to manipulate RGBA colors and opacity in Sass is essential for front-end developers and UI designers to build modern, responsive, and accessible web interfaces.

1

Define base color variables

Create two Sass variables called $primary-color and $secondary-color with the exact hex values #3498db and #e74c3c respectively.

SASS

# Define base color variables
# Your code here

Need a hint?

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

2

Create opacity variables

Add two Sass variables called $opacity-light and $opacity-heavy with the exact decimal values 0.3 and 0.7 respectively.

SASS

$primary-color: #3498db;
$secondary-color: #e74c3c;

# Define opacity variables
# Your code here

Need a hint?

Opacity values are decimals between 0 (transparent) and 1 (opaque).

3

Create RGBA color variables using opacity

Create two new Sass variables called $primary-color-light and $secondary-color-heavy. Use the rgba() function to combine $primary-color with $opacity-light, and $secondary-color with $opacity-heavy respectively.

SASS

$primary-color: #3498db;
$secondary-color: #e74c3c;

$opacity-light: 0.3;
$opacity-heavy: 0.7;

# Create RGBA color variables
# Your code here

Need a hint?

The rgba() function takes a color and an opacity value to create a transparent color.

4

Apply RGBA colors to CSS classes

Write CSS rules for classes .box-primary and .box-secondary that set the background-color property to $primary-color-light and $secondary-color-heavy respectively.

SASS

$primary-color: #3498db;
$secondary-color: #e74c3c;

$opacity-light: 0.3;
$opacity-heavy: 0.7;

$primary-color-light: rgba($primary-color, $opacity-light);
$secondary-color-heavy: rgba($secondary-color, $opacity-heavy);

.box-primary {
  /* Set background color here */
  // Your code here
}

.box-secondary {
  /* Set background color here */
  // Your code here
}

Need a hint?

Use the variable names exactly as given to set the background colors.