Cacher is the code snippet organizer for pro developers

<div class="box">
  <h1>Fuck yeah</h1>
</div>

/*
@content usage example
DISPLAY TABLE BOX
other examples: https://robots.thoughtbot.com/sasss-content-directive
*/

@mixin display-table($vertical_align: middle, $width: 100%, $height: 100vh) {
  display: table;
  width: $width;
  height: $height;
  > * {
    display: table-cell;
    text-align: center;
    vertical-align: $vertical-align;
    @content;
  }
}

.box {
  @include display-table(middle) {
    background-color: yellow;
  }
}

.box {
  @include display-table(middle, 100%, 400px) {
    background-color: yellow;
  }
}