Color scale generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a base color variable in Sass.

SASS

$base-color: [1];

Drag options to blanks, or click blank then click option'

AbaseColor

Bblue

C#3498db

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a color value.

Using a color name without quotes or hash (#).

The base color is defined as a hex color code #3498db, which is a shade of blue. This is the correct way to assign a color value in Sass.

2fill in blank

medium

Complete the code to create a lighter shade of the base color using Sass's lighten function.

SASS

$light-color: lighten($base-color, [1]);

Drag options to blanks, or click blank then click option'

A10

B10%

C0.1

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number without the % sign.

Using a decimal instead of a percentage.

The lighten function in Sass takes a color and a percentage value to lighten it. The percentage must include the % sign, like 10%.

3fill in blank

hard

Fix the error in the code to generate a color scale with 5 steps using a loop.

SASS

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

Drag options to blanks, or click blank then click option'

A$i

B#i

Ci

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without the $ sign.

Using an invalid variable name like #i.

In Sass loops, variables must be prefixed with $. So $i is correct to use inside the loop.

4fill in blank

hard

Fill both blanks to create a map of color shades with keys from 1 to 5 and values as lighter colors.

SASS

$color-scale: (
  [1]: lighten($base-color, 10%),
  [2]: lighten($base-color, 20%)
);

Drag options to blanks, or click blank then click option'

A1

Blighten

C2

Ddarken

Attempts:

3 left

💡 Hint

Common Mistakes

Using function names as keys instead of numbers.

Using darken instead of lighten for lighter shades.

The keys in the map are numbers representing shade steps: 1 and 2. The values are lighter colors using the lighten function already in the code.

5fill in blank

hard

Fill all three blanks to generate a full color scale map with keys 1 to 3 and values as lighter shades increasing by 15%.

SASS

$full-scale: (
  [1]: lighten($base-color, 15%),
  [2]: lighten($base-color, 30%),
  [3]: lighten($base-color, 45%)
);

Drag options to blanks, or click blank then click option'

A1

B2

C3

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys that do not match the number of shades.

Using numbers outside the range 1 to 3.

The map keys are 1, 2, and 3 to represent each shade step. The lighten percentages increase by 15% for each step.

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