Mixin libraries pattern in SASS

Introduction

Mixins let you reuse groups of CSS styles easily. A mixin library is a collection of these reusable style blocks to keep your code clean and organized.

You want to apply the same button styles in many places.

You need consistent spacing or colors across your site.

You want to avoid repeating long CSS code snippets.

You want to quickly update styles in many places by changing one mixin.

You want to share style patterns with your team.

Syntax

SASS

@mixin name($parameters) {
  // CSS styles here
}

@include name($arguments);

Use @mixin to define reusable style blocks.

Use @include to apply the mixin styles where needed.

Examples

This mixin centers content using flexbox. You include it inside any selector to apply those styles.

SASS

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center;
}

This mixin takes colors as parameters to create different button styles easily.

SASS

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

.btn-primary {
  @include button(blue, white);
}

Sample Program

This example shows a mixin called card that styles a box with background color, padding, rounded corners, and shadow. The .card class uses this mixin with specific values. The result is a neat card style container.

SASS

@charset "UTF-8";

@mixin card($bg-color, $padding) {
  background-color: $bg-color;
  padding: $padding;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.card {
  @include card(#f0f0f0, 2rem);
  max-width: 20rem;
  margin: 2rem auto;
  font-family: Arial, sans-serif;
}

.card h2 {
  margin-top: 0;
  color: #333;
}

.card p {
  color: #666;
  line-height: 1.4;
}

Important Notes

Mixins help avoid repeating code and make updates easier.

You can pass values to mixins to customize styles each time.

Keep mixin libraries organized in separate files for easy reuse.

Summary

Mixins are reusable style blocks in Sass.

Mixin libraries group many mixins for consistent styling.

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