How to create Sass mixin aliases with support for content blocks?

Question

How can I define multiple names for the same mixin, with support for content blocks?

Definition

@mixin desktop-breakpoint {
   @media only screen and (min-width: 769px) {
      @content;
   }
}

@mixin large-breakpoint {
   @include desktop-breakpoint;
}

Usage

.my-class {
   font-size: small;

   @include desktop-breakpoint {
      font-size: big;
   }
}

.my-other-class {
   color: red;

   @include large-breakpoint {
      color: blue;
   }
}

Error message

Mixin "large-breakpoint" does not accept a content block.

score 7 · Accepted Answer · answered Apr 26 '18 at 08:50

You're not passing any @content when using @include desktop-breakpoint in your large-breakpoint mixin. Doing this will fix your compilation error:

@mixin large-breakpoint {
   // Remember to pass content received by mixin to @include
   @include desktop-breakpoint {
     @content;
   }
}

Then your CSS will be compiled properly, as intended:

.my-class {
  font-size: small;
}
@media only screen and (min-width: 769px) {
  .my-class {
    font-size: big;
  }
}

.my-other-class {
  color: red;
}
@media only screen and (min-width: 769px) {
  .my-other-class {
    color: blue;
  }
}

See proof-of-concept example based on your modified code: https://www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527

How to create Sass mixin aliases with support for content blocks?

1 Answers1