Sass @mixin and @include

Welcome to The Coding College, your destination for coding excellence! In this tutorial, we’ll cover @mixin and @include, two powerful features in Sass that help you write DRY (Don’t Repeat Yourself) CSS. These tools enable you to define reusable chunks of code and include them wherever needed.

What Is a Mixin in Sass?

A mixin is a reusable block of code that can contain CSS rules, variables, and even other mixins. You define a mixin using @mixin and apply it with @include.

Defining a Mixin

Use the @mixin directive to create a mixin:

@mixin mixin-name {  
  // Styles go here  
}

Example: A Basic Mixin

@mixin box-shadow {  
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  
}

Using a Mixin

You include a mixin in your CSS using the @include directive:

.button {  
  @include box-shadow;  
}

Resulting CSS:

.button {  
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  
}

Mixins with Parameters

Mixins can accept parameters, making them even more flexible.

Example: Mixin with a Parameter

@mixin box-shadow($color) {  
  box-shadow: 0px 4px 6px $color;  
}  

.card {  
  @include box-shadow(rgba(0, 0, 0, 0.2));  
}

Resulting CSS:

.card {  
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);  
}

Default Values in Mixins

You can set default values for mixin parameters, which will be used if no value is provided during inclusion.

Example: Mixin with Default Parameters

@mixin box-shadow($color: rgba(0, 0, 0, 0.1)) {  
  box-shadow: 0px 4px 6px $color;  
}  

.alert {  
  @include box-shadow; // Uses default color  
}

Resulting CSS:

.alert {  
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);  
}

Mixins with Multiple Parameters

Mixins can accept multiple parameters, enabling advanced customizations.

Example: Multiple Parameters

@mixin flex($justify: center, $align: center, $direction: row) {  
  display: flex;  
  justify-content: $justify;  
  align-items: $align;  
  flex-direction: $direction;  
}  

.container {  
  @include flex(space-between, center, column);  
}

Resulting CSS:

.container {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  flex-direction: column;  
}

Nested Mixins

Mixins can also be nested within other rules or mixins for even more flexibility.

Example: Nested Mixins

@mixin button($bg-color, $text-color) {  
  background-color: $bg-color;  
  color: $text-color;  

  &:hover {  
    background-color: darken($bg-color, 10%);  
  }  
}  

.button-primary {  
  @include button(#3498db, #fff);  
}

Resulting CSS:

.button-primary {  
  background-color: #3498db;  
  color: #fff;  
}  

.button-primary:hover {  
  background-color: #2874a6;  
}

Best Practices for Using Mixins

  1. Reuse Common Styles: Use mixins for frequently used patterns like box shadows, transitions, or flexbox layouts.
  2. Parameterize When Needed: Add parameters to make mixins versatile.
  3. Avoid Overcomplication: Keep mixins simple and focused.
  4. Organize in a Separate File: Store mixins in a _mixins.scss file and import it into your main stylesheet.

Example: Comprehensive Use of Mixins

Here’s a complete example of using mixins in a real project:

// _mixins.scss  
@mixin box-shadow($color: rgba(0, 0, 0, 0.1)) {  
  box-shadow: 0px 4px 6px $color;  
}  

@mixin button($bg-color, $text-color) {  
  background-color: $bg-color;  
  color: $text-color;  
  padding: 10px 20px;  
  border: none;  
  border-radius: 5px;  
  cursor: pointer;  

  &:hover {  
    background-color: darken($bg-color, 10%);  
  }  
}  

// main.scss  
@import 'mixins';  

.card {  
  @include box-shadow(rgba(0, 0, 0, 0.15));  
}  

.button-primary {  
  @include button(#3498db, #fff);  
}  

.button-secondary {  
  @include button(#2ecc71, #fff);  
}

Conclusion

The @mixin and @include features in Sass empower you to write DRY, reusable, and maintainable CSS. By incorporating mixins into your workflow, you can streamline repetitive tasks and focus on building great designs.

Leave a Comment