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

Need a 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

Need a 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

Need a 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
}

Need a hint?

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