Why data types matter in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a color variable in SASS.

SASS

$primary-color: [1];

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

Atrue

Bblue

C123

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number like 123 instead of a color code.

Using boolean values like true for colors.

Colors in SASS are defined using color codes like #3498db. This is a valid color value.

2fill in blank

medium

Complete the code to set a font size using a number with units in SASS.

SASS

font-size: [1];

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

Alarge

B16

C16px

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using just a number without units.

Using boolean values instead of sizes.

Font sizes need units like px to be valid in SASS.

3fill in blank

hard

Fix the error in the SASS list definition by completing the blank.

SASS

$spacing: (10px, 20px, [1]);

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

A30px

Btrue

Cthirty

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers without units in lists of sizes.

Using strings or booleans instead of size values.

Lists in SASS must have consistent data types; spacing values need units like px.

4fill in blank

hard

Fill both blanks to create a map with string keys and color values in SASS.

SASS

$colors: ([1]: #ff0000, [2]: #00ff00);

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

A"error"

B"primary"

C"secondary"

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using booleans or unquoted words as keys.

Using inconsistent key types.

Map keys should be strings in quotes, like "primary" and "secondary".

5fill in blank

hard

Fill all three blanks to create a function that returns a color if a condition is true in SASS.

SASS

@function get-color($is-primary) {
  @if [1] {
    @return [2];
  } @else {
    @return [3];
  }
}

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

A$is-primary == true

B#3498db

C#95a5a6

D$is-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable alone without comparison in the condition.

Returning invalid color values.

The function checks if $is-primary is true, then returns the primary color #3498db, else returns a gray color #95a5a6.