Theming with mixins in SASS - Mini Project: Build & Apply

Theming with Mixins in Sass

📖 Scenario: You are building a simple website that needs two color themes: light and dark. You want to use Sass mixins to apply these themes easily to different parts of your site.

🎯 Goal: Create a Sass file that defines two color themes using mixins. Then apply these themes to CSS classes .light-theme and .dark-theme so that the background and text colors change accordingly.

📋 What You'll Learn

Create a Sass map called $themes with keys light and dark and their color values

Create a mixin called theme-colors that takes a theme name and sets background and text colors

Use the mixin to style .light-theme and .dark-theme classes

Ensure the code is valid Sass and compiles to correct CSS

💡 Why This Matters

🌍 Real World

Websites often need multiple color themes for user preferences or branding. Using Sass mixins and maps helps manage these themes cleanly and reuse styles.

💼 Career

Front-end developers use Sass mixins and theming to build scalable, maintainable stylesheets that adapt to different design requirements.

1

Create the themes map

Create a Sass map called $themes with two keys: light and dark. Set light to a map with background: #ffffff and color: #000000. Set dark to a map with background: #000000 and color: #ffffff.

SASS

# Create the $themes map with light and dark colors
# Your code here

Hint

Use nested maps inside the main $themes map for each theme's colors.

2

Create the theme-colors mixin

Create a mixin called theme-colors that takes one parameter $theme-name. Inside the mixin, use background and color properties set to the values from the $themes map for the given $theme-name. Use map-get to access nested map values.

SASS

$themes: (
  light: (
    background: #ffffff,
    color: #000000
  ),
  dark: (
    background: #000000,
    color: #ffffff
  )
);

// Create the theme-colors mixin here
// Your code here

Hint

Use map-get twice: first to get the theme map, then to get the color value.

3

Apply mixin to .light-theme and .dark-theme classes

Create two CSS classes: .light-theme and .dark-theme. Inside each class, include the theme-colors mixin with the correct theme name: light for .light-theme and dark for .dark-theme.

SASS

$themes: (
  light: (
    background: #ffffff,
    color: #000000
  ),
  dark: (
    background: #000000,
    color: #ffffff
  )
);

@mixin theme-colors($theme-name) {
  background: map-get(map-get($themes, $theme-name), background);
  color: map-get(map-get($themes, $theme-name), color);
}

// Add .light-theme and .dark-theme classes using the mixin
// Your code here

Hint

Use @include theme-colors(light); inside .light-theme and similarly for .dark-theme.

4

Add responsive font size for themes

Inside both .light-theme and .dark-theme classes, add a CSS rule to set font-size to 1.2rem for screens wider than 600px using a media query.

SASS

$themes: (
  light: (
    background: #ffffff,
    color: #000000
  ),
  dark: (
    background: #000000,
    color: #ffffff
  )
);

@mixin theme-colors($theme-name) {
  background: map-get(map-get($themes, $theme-name), background);
  color: map-get(map-get($themes, $theme-name), color);
}

.light-theme {
  @include theme-colors(light);
  // Add media query for font-size here
}

.dark-theme {
  @include theme-colors(dark);
  // Add media query for font-size here
}

Hint

Use a media query inside each theme class to set font-size: 1.2rem for screens wider than 600px.

Practice

1. What is the main purpose of using @mixin in Sass theming?

easy

A. To write plain CSS without nesting

B. To create reusable style blocks that can accept parameters

C. To import external CSS files

D. To define variables for colors and fonts

Solution

1. Step 1: Understand the role of @mixin

   @mixin defines reusable style blocks that can be included multiple times.

2. Step 2: Recognize parameter use in mixins

   Mixins can accept parameters to customize styles like colors or fonts.

3. Final Answer:

   To create reusable style blocks that can accept parameters -> Option B

4. Quick Check:

   @mixin = reusable styles [OK]

Hint: Mixins reuse styles with parameters, not variables or imports [OK]

Common Mistakes:

• Confusing mixins with variables
• Thinking mixins import files
• Assuming mixins write plain CSS only

2. Which of the following is the correct syntax to include a mixin named theme-colors with a parameter $main-color set to blue?

easy

A. @include theme-colors($main-color: blue);

B. @mixin theme-colors($main-color: blue);

C. @include theme-colors blue;

D. @mixin theme-colors($main-color) { blue; }

Solution

1. Step 1: Identify the correct way to apply a mixin

   Mixins are applied using @include, not @mixin.

2. Step 2: Check parameter passing syntax

   Parameters are passed inside parentheses with variable names and values, like ($main-color: blue).

3. Final Answer:

   @include theme-colors($main-color: blue); -> Option A

4. Quick Check:

   @include + parameters = @include theme-colors($main-color: blue); [OK]

Hint: Use @include with parentheses and named parameters [OK]

Common Mistakes:

• Using @mixin instead of @include to apply mixins
• Passing parameters without parentheses
• Confusing mixin definition and usage syntax

3. Given the Sass code:

@mixin theme($color) {
  background-color: $color;
  color: white;
}

.button {
  @include theme(red);
}

What will be the background color of the .button class in the compiled CSS?

medium

A. transparent

B. white

C. red

D. black

Solution

1. Step 1: Understand the mixin parameter usage

   The mixin theme sets background-color to the passed parameter $color.

2. Step 2: Check the included value

   The mixin is included with red, so background-color becomes red.

3. Final Answer:

   red -> Option C

4. Quick Check:

   Mixin parameter sets background-color = red [OK]

Hint: Mixin parameter directly sets background-color [OK]

Common Mistakes:

• Confusing text color with background color
• Assuming default colors override mixin
• Ignoring parameter passed to mixin

4. Identify the error in this Sass code snippet:

@mixin theme($color) {
  background-color: $color;
  color: white;
}

.button {
  @include theme;
}

medium

A. Missing semicolon after mixin definition

B. Mixin name is misspelled

C. Cannot use color property inside mixin

D. Mixin is included without required parameter

Solution

1. Step 1: Check mixin definition

   The mixin theme requires one parameter $color.

2. Step 2: Check mixin usage

   The mixin is included without any parameter, which causes an error.

3. Final Answer:

   Mixin is included without required parameter -> Option D

4. Quick Check:

   Missing parameter in @include = Mixin is included without required parameter [OK]

Hint: Always pass required parameters when including mixins [OK]

Common Mistakes:

• Forgetting to pass parameters to mixins
• Assuming default parameters without defining them
• Ignoring error messages about missing arguments

5. You want to create a theme mixin that sets background and text colors, but if no text color is provided, it should default to black. Which mixin definition correctly implements this behavior?

hard

A. @mixin theme($bg-color, $text-color: black) {
background-color: $bg-color;
color: $text-color;
}

B. @mixin theme($bg-color, $text-color) {
background-color: $bg-color;
color: if($text-color, $text-color, black);
}

C. @mixin theme($bg-color) {
background-color: $bg-color;
color: black;
}

D. @mixin theme($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
}

Solution

1. Step 1: Understand default parameter usage

   In Sass, default values for parameters are set using $param: default syntax.

2. Step 2: Check each option for default text color

   @mixin theme($bg-color, $text-color: black) { background-color: $bg-color; color: $text-color; } sets $text-color default to black, so if omitted, black is used.

3. Step 3: Verify other options

   @mixin theme($bg-color, $text-color) { background-color: $bg-color; color: if($text-color, $text-color, black); } tries to use if() function incorrectly; @mixin theme($bg-color) { background-color: $bg-color; color: black; } lacks text color parameter; @mixin theme($bg-color, $text-color) { background-color: $bg-color; color: $text-color; } has no default.

4. Final Answer:

   @mixin theme($bg-color, $text-color: black) { background-color: $bg-color; color: $text-color; } -> Option A

5. Quick Check:

   Default parameter syntax = @mixin theme($bg-color, $text-color: black) { background-color: $bg-color; color: $text-color; } [OK]

Hint: Use default parameter values with $param: default syntax [OK]

Common Mistakes:

• Trying to set defaults inside mixin body instead of parameters
• Using if() function incorrectly for defaults
• Omitting parameters needed for theming