Sass Content Blocks

Watch "Using the @content container" on LinkedIn Learning

A content block is an block of styles that are taken by a mixin. When a mixin is declare, a content block can by included using the @content at-rule in the mixin's body.

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  padding: .375rem .75rem;
  
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: .25rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  
  @include hover {
    background-color: #0069d9;
    border-color: #0069d9;
    cursor: pointer;
  }
}

Try it yourself on Sassmeister

# Sass Content Blocks

Sass Content Blocks