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

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

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

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
}

Hint

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

Practice

1. What does the rgba(255, 0, 0, 0.5) color value represent in Sass?

easy

A. A semi-transparent red color

B. A fully opaque blue color

C. A transparent green color

D. A solid black color

Solution

1. Step 1: Understand RGBA components

   The first three numbers (255, 0, 0) represent red, green, and blue. Here, red is full (255), green and blue are zero.

2. Step 2: Interpret the alpha value

   The last number (0.5) is the alpha channel, which controls transparency. 0.5 means 50% transparent.

3. Final Answer:

   A semi-transparent red color -> Option A

4. Quick Check:

   RGBA = red + transparency [OK]

Hint: RGBA's last value controls transparency from 0 to 1 [OK]

Common Mistakes:

• Confusing alpha with opacity property
• Mixing up RGB values order
• Thinking 0.5 means fully opaque

2. Which of the following is the correct Sass syntax to set a background color with 30% opacity using RGBA?

easy

A. background-color: rgba(0, 0, 255, 3);

B. background-color: rgba(0, 0, 255, 0.3);

C. background-color: rgba(0, 0, 255, 30);

D. background-color: rgba(0, 0, 255, '0.3');

Solution

1. Step 1: Check alpha value range

   Alpha must be a decimal between 0 and 1. 0.3 means 30% opacity.

2. Step 2: Validate syntax correctness

   Values must be numbers without quotes. So rgba(0, 0, 255, 0.3) is correct.

3. Final Answer:

   background-color: rgba(0, 0, 255, 0.3); -> Option B

4. Quick Check:

   Alpha decimal between 0 and 1 [OK]

Hint: Alpha must be decimal 0-1 without quotes [OK]

Common Mistakes:

• Using alpha values greater than 1
• Putting alpha in quotes
• Confusing percentage with decimal

3. Given the Sass code:

.box { background-color: rgba(100, 150, 200, 0.4); opacity: 0.5; }

What is the effective transparency of the box's background color?

medium

A. 20% opacity

B. 50% opacity

C. 70% opacity

D. 90% opacity

Solution

1. Step 1: Understand RGBA alpha and opacity interaction

   The background color has 0.4 alpha (40% opacity). The element's opacity is 0.5 (50%).

2. Step 2: Calculate combined opacity

   Effective opacity = 0.4 * 0.5 = 0.2 (20% opacity).

3. Final Answer:

   20% opacity -> Option A

4. Quick Check:

   Multiply alpha and opacity for final transparency [OK]

Hint: Multiply RGBA alpha by opacity for total transparency [OK]

Common Mistakes:

• Ignoring opacity property effect
• Adding alpha and opacity instead of multiplying
• Assuming opacity overrides RGBA alpha

4. Identify the error in this Sass code snippet:

.alert { background-color: rgba(255, 255, 0, 50%); }

medium

A. Opacity property is required for transparency

B. RGB values must be between 0 and 100

C. Missing semicolon after rgba function

D. Alpha value should be a decimal between 0 and 1, not a percentage

Solution

1. Step 1: Check alpha value format

   The alpha channel in rgba() must be a decimal number between 0 and 1, not a percentage.

2. Step 2: Confirm RGB value ranges and syntax

   RGB values 255, 255, 0 are valid. Semicolon is present. Opacity property is optional.

3. Final Answer:

   Alpha value should be a decimal between 0 and 1, not a percentage -> Option D

4. Quick Check:

   Alpha decimal, not percent [OK]

Hint: Alpha uses decimals, never percentages in rgba() [OK]

Common Mistakes:

• Using percentages for alpha
• Confusing opacity property with alpha
• Assuming missing semicolon causes error

5. You want a button with a blue background that is 60% opaque but also want the text inside fully opaque. Which Sass approach achieves this?

hard

A. Set background-color: rgba(0, 0, 255, 0.6); and opacity: 0.6 on the button

B. Set background-color: blue; and opacity: 0.6 on the button

C. Set background-color: rgba(0, 0, 255, 0.6); and opacity: 1 on the button

D. Set background-color: blue; and opacity: 1 on the button

Solution

1. Step 1: Understand opacity effect on children

   Setting opacity on the button affects the entire element including text, making text semi-transparent.

2. Step 2: Use RGBA for background transparency only

   Using rgba with alpha controls only background transparency, leaving text fully opaque.

3. Final Answer:

   Set background-color: rgba(0, 0, 255, 0.6); and opacity: 1 on the button -> Option C

4. Quick Check:

   Use RGBA alpha for background transparency, not opacity property [OK]

Hint: Use RGBA alpha for background transparency, avoid opacity on container [OK]

Common Mistakes:

• Using opacity on container affecting text
• Confusing opacity and RGBA alpha
• Setting opacity less than 1 on button