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.

Practice

1. What is the main purpose of generating a color scale in Sass?

easy

A. To make colors flash on the screen

B. To write plain CSS without variables

C. To create a smooth range of colors for consistent design

D. To remove all colors from a website

Solution

1. Step 1: Understand color scale concept

   A color scale is a set of colors that change gradually, helping designs look smooth and consistent.

2. Step 2: Identify the purpose in Sass

   Sass can generate these scales automatically to save time and keep colors consistent.

3. Final Answer:

   To create a smooth range of colors for consistent design -> Option C

4. Quick Check:

   Color scale = smooth color range [OK]

Hint: Color scales = smooth color changes for design [OK]

Common Mistakes:

• Thinking color scales remove colors
• Confusing color scales with animations
• Believing color scales are only for plain CSS

2. Which Sass function is commonly used to lighten a color when generating a color scale?

easy

A. lighten()

B. darken()

C. saturate()

D. transparentize()

Solution

1. Step 1: Recall Sass color functions

   Sass provides functions like lighten() and darken() to adjust color brightness.

2. Step 2: Identify function to make color lighter

   lighten() increases the lightness of a color, making it brighter.

3. Final Answer:

   lighten() -> Option A

4. Quick Check:

   Lighten color = lighten() [OK]

Hint: Lighten color? Use lighten() function [OK]

Common Mistakes:

• Using darken() to lighten colors
• Confusing saturate() with lightening
• Thinking transparentize() changes brightness

3. What will be the output color of this Sass code snippet?

$base-color: #336699;
$scale-color: lighten($base-color, 20%);
.my-class {
  background-color: $scale-color;
}

medium

A. #4d80b2

B. #1a334d

C. #336699

D. #6699cc

Solution

1. Step 1: Understand lighten() effect on base color

   The base color #336699 is a medium blue. lighten($base-color, 20%) makes it 20% lighter, increasing brightness.

2. Step 2: Identify the correct lighter color

   Lightening #336699 by 20% results in a lighter blue, close to #6699cc.

3. Final Answer:

   #6699cc -> Option D

4. Quick Check:

   lighten(#336699, 20%) = #6699cc [OK]

Hint: Lighten base color by 20% gives lighter hex [OK]

Common Mistakes:

• Choosing original color instead of lightened
• Confusing darken() output with lighten()
• Picking a darker hex code

4. Identify the error in this Sass code for generating a color scale:

@function generate-scale($color, $steps) {
  @for $i from 1 through $steps {
    .color-#{$i} {
      color: lighten($color, $i * 10%);
    }
  }
}

medium

A. Using percentage inside multiplication is invalid syntax

B. Missing @return statement in function

C. Incorrect loop syntax for @for

D. Cannot use interpolation inside class names

Solution

1. Step 1: Check function structure

   The function uses @for loop to create classes but does not return any value, which is required for functions.

2. Step 2: Understand Sass function requirements

   Sass functions must have a @return statement to output a value. This code lacks it, causing an error.

3. Final Answer:

   Missing @return statement in function -> Option B

4. Quick Check:

   Functions need @return [OK]

Hint: Sass functions must return a value [OK]

Common Mistakes:

• Thinking percentage multiplication is invalid
• Believing interpolation can't be used in class names
• Confusing @for syntax errors

5. How can you generate a color scale of 5 steps from a base color using Sass maps and loops to store colors with keys 'step-1' to 'step-5'?

hard

A. @function create-scale($color) {
$scale: ();
@for $i from 1 through 5 {
$scale: map-merge($scale, ('step-#{$i}': lighten($color, $i * 10%)));
}
@return $scale;
}

B. @mixin create-scale($color) {
@for $i from 1 through 5 {
.step-#{$i} { color: lighten($color, $i * 10%); }
}
}

C. @function create-scale($color) {
$scale: [];
@each $i in 1 2 3 4 5 {
$scale: append($scale, lighten($color, $i * 10%));
}
@return $scale;
}

D. @function create-scale($color) {
$scale: map();
@for $i from 1 through 5 {
$scale['step-#{$i}'] = lighten($color, $i * 10%);
}
@return $scale;
}

Solution

1. Step 1: Understand map creation and merging

   In Sass, maps start empty with (), and map-merge() adds key-value pairs properly.

2. Step 2: Check each option for correct map usage

   @function create-scale($color) { $scale: (); @for $i from 1 through 5 { $scale: map-merge($scale, ('step-#{$i}': lighten($color, $i * 10%))); } @return $scale; } correctly initializes an empty map, uses @for loop, merges new keys with lighten() values, and returns the map.

3. Step 3: Identify errors in other options

   @mixin create-scale($color) { @for $i from 1 through 5 { .step-#{$i} { color: lighten($color, $i * 10%); } } } is a mixin, not a function returning a map. @function create-scale($color) { $scale: []; @each $i in 1 2 3 4 5 { $scale: append($scale, lighten($color, $i * 10%)); } @return $scale; } uses list syntax []. @function create-scale($color) { $scale: map(); @for $i from 1 through 5 { $scale['step-#{$i}'] = lighten($color, $i * 10%); } @return $scale; } tries invalid map assignment syntax.

4. Final Answer:

   Option A code correctly generates the color scale map -> Option A

5. Quick Check:

   Use map-merge() to build maps in loops [OK]

Hint: Use map-merge() inside @for to build Sass maps [OK]

Common Mistakes:

• Using lists instead of maps for key-value pairs
• Trying to assign map keys with bracket syntax
• Confusing mixins with functions for returning values