Theme switching architecture in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS variable for the primary color.

SASS

:root { --primary-color: [1]; }

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

Ablue

Bprimary-color

Ccolor-primary

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a color value

Forgetting the '#' in the color code

CSS variables are defined with a name starting with two dashes and a value like a color code. Here, '#3498db' is a valid color value.

2fill in blank

medium

Complete the Sass code to use the CSS variable for the background color.

SASS

body { background-color: var([1]); }

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

Abg-color

Bbackground-color

C--background-color

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dashes in the variable name

Using a property name instead of a variable name

To use a CSS variable, you write var(--variable-name). The variable name must start with two dashes.

3fill in blank

hard

Fix the error in the Sass mixin to switch themes by setting CSS variables.

SASS

@mixin theme-switch($theme) { :root { [1]: if($theme == 'dark', #222, #fff); } }

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

A--background-color

Bbackground-color

Cbackground

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names without dashes

Confusing CSS properties with CSS variables

CSS variables must be defined with names starting with two dashes. Here, '--background-color' is correct.

4fill in blank

hard

Fill both blanks to create a Sass map for themes and access the primary color.

SASS

$themes: ( 'light': (primary: #fff), 'dark': (primary: #000) ); $color: map-get(map-get($themes, [1]), [2]);

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

A'dark'

B'primary'

C'light'

D'secondary'

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping theme and color keys

Using keys not defined in the map

To get the primary color from the 'light' theme, first get the 'light' map, then get 'primary' from it.

5fill in blank

hard

Fill all three blanks to define a Sass function that returns a theme color.

SASS

@function get-theme-color($theme, $color) { @return map-get(map-get($[1], $[2]), $[3]); }

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

Athemes

Btheme

Ccolor

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names

Confusing parameters with map keys

The function accesses the global $themes map, then gets the map for $theme, then the color value for $color.