Color scale generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output color of this Sass function call?

Given the Sass function lighten($color, $amount), what is the resulting color when you run lighten(#336699, 20%)?

SASS

$color: #336699;
$result: lighten($color, 20%);

A #6699cc

B #4d80b3

C #1a334d

D #99ccff

💡 Hint

Lighten increases the brightness by the given percentage.

The lighten function increases the lightness of the color by 20%, so #336699 becomes #6699cc.

🧠 Conceptual

intermediate

How many colors are generated by this Sass loop?

Consider this Sass code that generates a color scale by darkening a base color in 5 steps:

$base-color: #ff6600;
@for $i from 1 through 5 {
  $shade: darken($base-color, $i * 10%);
}

How many distinct colors does this loop create?

SASS

$base-color: #ff6600;
@for $i from 1 through 5 {
  $shade: darken($base-color, $i * 10%);
}

A 4

B 6

C 10

D 5

💡 Hint

The loop runs from 1 to 5 inclusive.

The loop runs 5 times, each time generating one distinct darker shade, so 5 colors are created.

❓ selector

advanced

Which Sass selector generates a color scale class list correctly?

You want to create CSS classes named .color-1 to .color-5 each with a different shade of blue. Which Sass code snippet correctly generates these classes with increasing lightness?

SASS

$base: #0000ff;
@for $i from 1 through 5 {
  .color-#{$i} {
    color: lighten($base, $i * 10%);
  }
}

A

@each $i in 1 2 3 4 5 {
  .color-#{$i} {
    color: lighten($base, $i * 10%);
  }
}

B

@for $i from 1 through 5 {
  .color-#{$i} {
    color: lighten($base, $i * 10%);
  }
}

C

@while $i <= 5 {
  .color-#{$i} {
    color: lighten($base, $i * 10%);
  }
  $i: $i + 1;
}

D

@for $i from 0 through 4 {
  .color-#{$i} {
    color: lighten($base, $i * 10%);
  }
}

💡 Hint

Remember Sass @for loops can use 'from' and 'through' to include both ends.

Option B uses @for from 1 through 5, correctly generating classes .color-1 to .color-5 with increasing lightness.

❓ layout

advanced

What visual result does this Sass grid color scale produce?

This Sass code creates a grid of colored squares with a color scale from red to yellow. What will the user see?

SASS

$colors: (red, orange, yellow);
.container {
  display: grid;
  grid-template-columns: repeat(3, 5rem);
  gap: 1rem;
}
@each $color in $colors {
  .box-#{$color} {
    background-color: $color;
    width: 5rem;
    height: 5rem;
  }
}

A Three squares overlapping each other with mixed colors.

B A single column of three squares stacked vertically with colors red, orange, yellow.

C Three colored squares in a row: red, orange, yellow, each 5rem by 5rem with 1rem gap.

D No visible squares because the classes are not applied.

💡 Hint

Grid with 3 columns and gap means squares appear side by side with space.

The grid has 3 columns, so the three colored boxes appear side by side horizontally with spacing.

❓ accessibility

expert

Which Sass color scale approach best improves accessibility for colorblind users?

You want to create a color scale for a website that is friendly for users with color vision deficiencies. Which Sass approach below best supports accessibility?

A Use a color scale with varying lightness and saturation but keep hue constant, combined with text labels.

B Use only grayscale colors without any hue variation.

C Use random colors for each scale step to ensure variety.

D Use only bright red to green colors in the scale without text labels.

💡 Hint

Accessibility means colors should be distinguishable even if hue perception is limited.

Option A uses lightness and saturation changes with constant hue plus text labels, which helps colorblind users distinguish scale steps.