Mixins in SCSS

What are Mixins?

Mixins are reusable blocks of CSS declarations that you can include in your stylesheet at various places. They function similarly to functions in other programming languages and help to avoid redundancy and make code more maintainable.

Basic Syntax


// Definition of a mixin
@mixin box-shadow {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

// Using the mixin
.card {
  @include box-shadow;
}

.button {
  @include box-shadow;
}

Mixins with Parameters

Mixins can accept parameters, making them even more flexible:


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

// Usage with different values
.card {
  @include box-shadow(0, 2px, 5px, rgba(0, 0, 0, 0.1));
}

.button {
  @include box-shadow(0, 4px, 10px, rgba(0, 0, 0, 0.2));
}

Default Values for Parameters


// Mixin with default values
@mixin box-shadow($x: 0, $y: 2px, $blur: 5px, $color: rgba(0, 0, 0, 0.1)) {
  box-shadow: $x $y $blur $color;
}

// Usage with default values
.card {
  @include box-shadow(); // Uses all default values
}

// Overriding individual parameters
.button {
  @include box-shadow($blur: 10px, $color: rgba(0, 0, 0, 0.2));
}

Nested Mixins

Mixins can contain or call other mixins:


@mixin transition($property) {
  transition: $property 0.3s ease;
}

@mixin button-styles {
  padding: 10px 15px;
  border-radius: 4px;
  @include transition(all); // Mixin within a mixin
}

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

Mixins with Content Blocks (@content)

With the @content directive, you can insert additional content into a mixin:


@mixin media-query($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

// Using the mixin with @content
.header {
  padding: 20px;

  @include media-query(mobile) {
    padding: 10px;
    font-size: 14px;
  }

  @include media-query(desktop) {
    padding: 30px;
    font-size: 18px;
  }
}

Compiles to:


.header {
  padding: 20px;
}
@media (max-width: 767px) {
  .header {
    padding: 10px;
    font-size: 14px;
  }
}
@media (min-width: 1024px) {
  .header {
    padding: 30px;
    font-size: 18px;
  }
}

Pro Tip: The @content directive is particularly useful for creating responsive design systems, handling browser-specific styles, and creating reusable patterns that need customization.

Best Practices for Mixins

Keep mixins focused: Each mixin should do one thing well.
Document parameters: Add comments to explain what each parameter does.
Use default values: Make mixins more flexible with sensible defaults.
Organize in partials: Keep related mixins in dedicated partial files.
Consider performance: Be aware that overusing mixins can lead to larger CSS files.

Example: A Well-Organized Mixin Library


// _mixins.scss
@import 'mixins/typography';
@import 'mixins/responsive';
@import 'mixins/animations';
@import 'mixins/utilities';

// _mixins/responsive.scss
@mixin mobile {
  @media (max-width: 767px) { @content; }
}

@mixin tablet {
  @media (min-width: 768px) and (max-width: 1023px) { @content; }
}

@mixin desktop {
  @media (min-width: 1024px) { @content; }
}

// Usage in components
.component {
  @include mobile {
    // Mobile-specific styles
  }
}