Introduction

In this tutorial, we will be exploring the process of creating theme variations using SASS/SCSS mixins. Mixins in SASS are a powerful tool that allows us to reuse blocks of styles throughout our stylesheet with ease. By the end of this guide, you will understand how to use color functions within these mixins for dynamic color manipulation to create different theme variations.

Learning Outcomes

1. Understanding SASS/SCSS mixins
2. Using color functions within mixins
3. Creating theme variations

Prerequisites

1. Basic knowledge of HTML/CSS
2. Understanding of SASS/SCSS

Step-by-Step Guide

Mixins in SASS allow you to define styles that can be reused throughout your stylesheet without having to re-write the same code. You can even pass in values to make your mixin more flexible. This feature comes in handy when you want to create theme variations.

Creating a Mixin

Let's start by creating a simple mixin for a button. The mixin will receive parameters for background-color and color (text color).

@mixin button($bg-color, $color) {
  background-color: $bg-color;
  color: $color;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
}

Using a Mixin

To use the mixin, you have to use the @include directive followed by the mixin name and the arguments in parenthesis. Below is an example of how to use the button mixin we created.

.btn {
  @include button(#ff0000, #ffffff);
}

Color Functions

SASS provides various color functions that you can use to manipulate colors. For example, you can use lighten and darken to get a lighter or darker variant of a color. This can be useful when creating themes.

.btn-light {
  @include button(lighten(#ff0000, 20%), #ffffff);
}

.btn-dark {
  @include button(darken(#ff0000, 20%), #ffffff);
}

Creating Theme Variations

You can create different theme variations by using different colors with the mixin. Below is an example of how to create a light and dark theme.

.light-theme {
  @include button(lighten(#ff0000, 20%), #ffffff);
}

.dark-theme {
  @include button(darken(#ff0000, 20%), #ffffff);
}

Code Examples

Example 1

@mixin button($bg-color, $color) {
  background-color: $bg-color;
  color: $color;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
}

.btn-primary {
  @include button(#007bff, #ffffff);
}

.btn-secondary {
  @include button(#6c757d, #ffffff);
}

In this example, we created two different buttons using the button mixin. The btn-primary button has a blue background and white text, while the btn-secondary button has a gray background and white text.

Example 2

@mixin theme($bg-color) {
  background-color: $bg-color;
  color: if(lightness($bg-color) > 50%, #000000, #ffffff);
}

.light-theme {
  @include theme(#ffffff);
}

.dark-theme {
  @include theme(#000000);
}

In this example, we created a theme mixin which takes a background color as a parameter. The mixin also uses the lightness function to determine the text color. If the background color is light (lightness > 50%), the text color is black. Otherwise, the text color is white.

Summary

In this tutorial, we learned about SASS/SCSS mixins and how to use color functions within these mixins for dynamic color manipulation. We also looked at how to use these concepts to create different theme variations.

Practice Exercises

1. Create a mixin for a card with a title and description. The mixin should take parameters for the title color and description color. Use the mixin to create different card variants.

2. Create a theme mixin which takes a primary color and a secondary color as parameters. The mixin should apply the primary color to the background and the secondary color to the text. Create a light and dark theme using the mixin.

Additional Resources

1. SASS/SCSS Mixins
2. SASS Color Functions