Mixin definition with @mixin in SASS

Introduction

Mixins let you reuse groups of CSS styles easily. They save time and keep your code neat.

When you want to apply the same styles to many places on your website.

When you need to change a style in many places by editing just one spot.

When you want to add optional style parts using parameters.

When you want to keep your CSS organized and avoid repeating code.

Syntax

SASS

@mixin mixin-name($param1, $param2) {
  /* CSS styles here */
}

@include mixin-name(value1, value2);

The @mixin keyword defines a reusable style block.

Use @include to add the mixin styles where you want.

Examples

This mixin adds rounded corners with a fixed radius.

SASS

@mixin rounded-corners {
  border-radius: 10px;
}

This mixin uses a parameter to set different shadow styles.

SASS

@mixin box-shadow($shadow) {
  box-shadow: $shadow;
}

Here, the rounded-corners mixin is included inside a button style.

SASS

.button {
  @include rounded-corners;
  background-color: blue;
}

Sample Program

This example shows a mixin named fancy-text that takes two parameters: color and size. It sets text color, size, weight, and uppercase style. Then it is used in two classes with different colors and sizes.

SASS

@mixin fancy-text($color, $size) {
  color: $color;
  font-size: $size;
  font-weight: bold;
  text-transform: uppercase;
}

.title {
  @include fancy-text(red, 2rem);
  margin-bottom: 1rem;
}

.subtitle {
  @include fancy-text(blue, 1.5rem);
  margin-bottom: 0.5rem;
}

Important Notes

Mixins help avoid repeating the same CSS code in many places.

You can add default values to mixin parameters for flexibility.

Mixins can include any valid CSS, including other mixins.

Summary

Mixins let you write reusable CSS blocks with @mixin.

Use @include to apply mixins where needed.

Parameters make mixins flexible and powerful.