Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

• Similar to partials but won’t need it’s own file
• Declaration syntax - @mixin mixinName {}
• Usage syntax - @include mixinName

Example

@mixin defaultPadding {
  padding: 2rem 4rem;
}

.main {
  background-color: coral;
  @include defaultPadding;
  
  #{&}__paragraph1 {
    background-color: teal;
    @include defaultPadding;
    
    &:hover {
      background-color: pink;
    }
  }

• https://codepen.io/seanho96/pen/YzpwEQg