RGBA and opacity manipulation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output color of this Sass code?

Given the Sass code below, what is the resulting background color in CSS?

SASS

$base-color: rgba(255, 0, 0, 0.5);
$overlay-opacity: 0.3;
$final-color: rgba(red($base-color), green($base-color), blue($base-color), alpha($base-color) * $overlay-opacity);

.element {
  background-color: $final-color;
}

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

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

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

D background-color: rgba(255, 0, 0, 0.15);

💡 Hint

Multiply the alpha value of the base color by the overlay opacity.

The base color has alpha 0.5. Multiplying by 0.3 gives 0.15, so the final rgba alpha is 0.15.

🧠 Conceptual

intermediate

Which Sass function correctly changes opacity without altering color channels?

You want to keep the red, green, and blue values the same but change only the opacity of a color variable $color to 0.7. Which function call achieves this?

A rgba($color, 0.7)

B opacity($color, 0.7)

C change-opacity($color, 0.7)

D set-alpha($color, 0.7)

💡 Hint

Sass's rgba() can take a color and a new alpha value.

The rgba() function in Sass can take a color and a new alpha value to change opacity without changing RGB.

❓ selector

advanced

Which selector applies a semi-transparent overlay using Sass variables?

Given these Sass variables, which selector rule correctly applies a semi-transparent black overlay with 40% opacity over a container?

SASS

$overlay-color: rgba(0, 0, 0, 0.4);

.container {
  // your code here
}

A .container { background-color: $overlay-color; }

B .container::before { content: ""; position: absolute; inset: 0; background-color: $overlay-color; }

C .container::after { content: ""; position: relative; background-color: $overlay-color; }

D .container::before { content: ""; position: fixed; inset: 0; background-color: $overlay-color; }

💡 Hint

Use a pseudo-element with absolute positioning to overlay inside the container.

Option B uses ::before with absolute positioning and inset 0 to cover the container with the overlay color.

❓ layout

advanced

How to keep text fully opaque over a semi-transparent background in Sass?

You want a container with a semi-transparent blue background but the text inside should be fully opaque. Which Sass and CSS approach achieves this?

SASS

$bg-color: rgba(0, 0, 255, 0.5);

.container {
  background-color: $bg-color;
  // your code here
}

.container p {
  // your code here
}

A

.container { background-color: $bg-color; }
.container p { color: black; }

B

.container { background-color: $bg-color; opacity: 0.5; }
.container p { color: black; }

C

.container { position: relative; }
.container::before { content: ""; position: absolute; inset: 0; background-color: $bg-color; z-index: 0; }
.container p { position: relative; z-index: 1; }

D

.container { background-color: blue; opacity: 0.5; }
.container p { opacity: 1; }

💡 Hint

Use a separate overlay layer so text opacity is not affected.

Setting opacity on container affects all children. Using a ::before overlay with z-index keeps text fully opaque.

❓ accessibility

expert

What is the minimum opacity for text background to maintain WCAG AA contrast?

You have white text (#FFFFFF) on a black background (#000000). You want to add a semi-transparent black overlay behind the text using rgba(0,0,0,alpha). What is the minimum alpha value to keep at least 4.5:1 contrast ratio for WCAG AA compliance?

A 0.45

B 0.75

C 0.18

D 0.90

💡 Hint

WCAG AA requires 4.5:1 contrast ratio for normal text.

A black overlay with alpha 0.45 on white text maintains the minimum 4.5:1 contrast ratio over black background.

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