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.