Including mixins with @include in SASS

Introduction

Mixins let you reuse styles easily. Using @include adds those styles where you want.

You want to apply the same button style to many buttons.

You need to add a set of styles for a responsive layout in multiple places.

You want to keep your CSS clean by reusing common style groups.

You want to add vendor prefixes or special effects repeatedly without copying code.

Syntax

SASS

@include mixin-name;
@include mixin-name(arguments);

Use @include inside a CSS selector to add mixin styles.

If the mixin needs values, pass them inside parentheses.

Examples

This adds rounded corners to the .button class using a mixin without arguments.

SASS

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

.button {
  @include rounded-corners;
}

This mixin takes a color argument and applies it to the text color.

SASS

@mixin text-color($color) {
  color: $color;
}

.title {
  @include text-color(red);
}

Sample Program

This example creates a box-shadow mixin with four parameters. The .card class uses @include to add a shadow with specific values.

SASS

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.card {
  width: 200px;
  height: 100px;
  background-color: #eee;
  @include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.3));
}

Important Notes

Mixins help avoid repeating code and make updates easier.

You can include multiple mixins in one selector.

Passing arguments lets you customize mixins for different uses.

Summary

@include adds mixin styles inside selectors.

Mixins can have arguments to customize styles.

Using mixins keeps your CSS clean and reusable.