Theming with mixins in SASS

Introduction

Theming with mixins helps you reuse style patterns easily and keep your website colors and fonts consistent.

You want to quickly change colors or fonts across your whole site.

You need to apply the same style to many buttons or sections.

You want to keep your code clean and avoid repeating styles.

You want to create light and dark modes for your website.

You want to share style rules with your team in a simple way.

Syntax

SASS

@mixin theme-name($color, $font-size) {
  color: $color;
  font-size: $font-size;
}

.selector {
  @include theme-name(blue, 1.2rem);
}

@mixin defines a reusable style block.

@include applies the mixin with specific values.

Examples

This mixin sets background and text colors for a button style.

SASS

@mixin button-theme($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
}

.button-primary {
  @include button-theme(#007bff, white);
}

This mixin styles headings with font family and weight.

SASS

@mixin heading-theme($font-family, $font-weight) {
  font-family: $font-family;
  font-weight: $font-weight;
  margin-bottom: 1rem;
}

h1 {
  @include heading-theme('Arial, sans-serif', 700);
}

Sample Program

This example creates a mixin for card backgrounds and text colors. It uses a light blue for the normal card and a dark theme for the dark card.

SASS

@use 'sass:color';

@mixin theme-colors($bg, $text) {
  background-color: $bg;
  color: $text;
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
  @include theme-colors(color.adjust(#3498db, $lightness: 20%), white);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.card-dark {
  @include theme-colors(#2c3e50, #ecf0f1);
}

Important Notes

Mixins can take any number of parameters to customize styles.

Use mixins to keep your theme consistent and easy to update.

You can combine mixins with variables for even more flexibility.

Summary

Theming with mixins helps reuse style code easily.

Mixins accept parameters to customize colors, fonts, and more.

Use @mixin to define and @include to apply them.