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.

Practice

1. What is the main purpose of using Sass variables in a theme switching architecture?

easy

A. To store colors and reuse them easily across themes

B. To write JavaScript code for switching themes

C. To create HTML elements dynamically

D. To disable CSS styles for certain themes

Solution

1. Step 1: Understand Sass variables role

   Sass variables hold values like colors to reuse them easily.

2. Step 2: Connect variables to theme switching

   Using variables lets you change colors in one place for all themes.

3. Final Answer:

   To store colors and reuse them easily across themes -> Option A

4. Quick Check:

   Sass variables = reusable colors [OK]

Hint: Remember: variables store values for easy updates [OK]

Common Mistakes:

• Confusing Sass variables with JavaScript functions
• Thinking variables create HTML elements
• Believing variables disable styles

2. Which Sass syntax correctly defines a color variable for a dark theme?

easy

A. @dark-color: #333;

B. $dark-color: #333;

C. var dark-color = #333;

D. dark-color = #333;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) followed by the name and colon.

2. Step 2: Check each option

   Only $dark-color: #333; uses correct Sass syntax: $dark-color: #333;

3. Final Answer:

   $dark-color: #333; -> Option B

4. Quick Check:

   Sass variable syntax = $name: value; [OK]

Hint: Sass variables always start with $ and end with semicolon [OK]

Common Mistakes:

• Using equal sign (=) instead of colon (:)
• Missing $ before variable name
• Using @ instead of $

3. Given this Sass code snippet, what background color will the body have when the .dark-theme class is added?

$light-bg: #fff;
$dark-bg: #222;

body {
  background-color: $light-bg;
}

.dark-theme {
  body {
    background-color: $dark-bg;
  }
}

medium

A. #222 (dark gray)

B. #fff (white)

C. No background color

D. Background color depends on JavaScript

Solution

1. Step 1: Understand default body background

   Without any class, body uses $light-bg (#fff).

2. Step 2: Check effect of .dark-theme class

   When .dark-theme is added, body background changes to $dark-bg (#222).

3. Final Answer:

   #222 (dark gray) -> Option A

4. Quick Check:

   .dark-theme body background = $dark-bg [OK]

Hint: Class styles override default styles when applied [OK]

Common Mistakes:

• Ignoring nested selector inside .dark-theme
• Thinking default color stays when class added
• Assuming JavaScript sets color directly

4. Identify the error in this Sass snippet for theme switching:

$primary-color: #000;

.light-theme {
  $primary-color: #fff;
  color: $primary-color;
}

medium

A. Selector .light-theme should be nested inside body

B. Missing semicolon after $primary-color definition

C. Variables cannot be redefined inside a selector block

D. Color property should be outside the selector

Solution

1. Step 1: Check variable scope rules in Sass

   Sass variables cannot be redefined inside selector blocks; they are global or local in mixins/functions.

2. Step 2: Analyze the code snippet

   $primary-color is redefined inside .light-theme selector, which is invalid syntax.

3. Final Answer:

   Variables cannot be redefined inside a selector block -> Option C

4. Quick Check:

   Sass variables scope = no redefinition inside selectors [OK]

Hint: Define variables only at root or inside mixins, not selectors [OK]

Common Mistakes:

• Trying to redefine variables inside CSS selectors
• Forgetting semicolons (not the main error here)
• Misunderstanding nesting rules

5. You want to build a theme switcher that toggles between light and dark themes using Sass and JavaScript. Which architecture is best to keep your Sass code clean and scalable?

hard

A. Write all colors directly in CSS without variables and change styles with inline JavaScript

B. Create separate CSS files for each theme and reload the page to switch

C. Use JavaScript to rewrite Sass variables at runtime for theme switching

D. Define color variables for each theme, create separate classes using those variables, and toggle classes with JavaScript

Solution

1. Step 1: Understand Sass and JavaScript roles

   Sass variables keep colors organized; JavaScript toggles CSS classes dynamically.

2. Step 2: Evaluate options for scalability and cleanliness

   Define color variables for each theme, create separate classes using those variables, and toggle classes with JavaScript uses variables and classes properly, making code easy to maintain and switch themes without reload.

3. Final Answer:

   Define color variables for each theme, create separate classes using those variables, and toggle classes with JavaScript -> Option D

4. Quick Check:

   Variables + classes + JS toggle = clean scalable theme switch [OK]

Hint: Use variables and classes, toggle classes with JS for best practice [OK]

Common Mistakes:

• Trying to change Sass variables at runtime (impossible)
• Hardcoding colors without variables
• Reloading page instead of toggling classes