stacked sass mixin experiment

SassMeister-input-HTML.html

<div class="stack">
  lorem ipsum
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@mixin stacked($offset: 3px, $border: 1px) {
    position: relative;
    border: $border solid #494949;
    
    @content;
   
    &:after, &:before {
        position: absolute;
        box-sizing: border-box;
        border: $border solid #494949;
        background: inherit;
        content: '';
        @content;
    }

    &:after {
        top: $offset;
        right: -($offset + $border);
        bottom: -($offset + $border);
        left: $offset;
        z-index: -1;
    }

    &:before {
        top: $offset * 2;
        right: -($offset * 2 + $border);
        bottom: -($offset * 2 + $border);
        left: $offset * 2;
        z-index: -2;
    }
}

.stack {
    @include stacked(5px, 1px) { border-radius: 5px };
    padding: 5px;
    width: 300px;
    background-color: orange;
    line-height: 1.4; /* line-height should always be relative to font size */
}

SassMeister-output.css

.stack {
  position: relative;
  border: 1px solid #494949;
  border-radius: 5px;
  padding: 5px;
  width: 300px;
  background-color: orange;
  line-height: 1.4;
  /* line-height should always be relative to font size */
}
.stack:after, .stack:before {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #494949;
  background: inherit;
  content: '';
  border-radius: 5px;
}
.stack:after {
  top: 5px;
  right: -6px;
  bottom: -6px;
  left: 5px;
  z-index: -1;
}
.stack:before {
  top: 10px;
  right: -11px;
  bottom: -11px;
  left: 10px;
  z-index: -2;
}

SassMeister-rendered.html

<div class="stack">
  lorem ipsum
</div>