Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

//
// @author Daryl Roberts
// @license MIT
//

@mixin side-shadow($shadow, $side, $base-size: 50px) {
  // If you need to make shadows larger than 50px, you can
  // override the base size.
  
  // Some basics.
  // The child is absolute, so the parent must be relative.  
  // We're going to use a pseudo element to create the shadow, so
  // we need to hide the overflow.
  position: relative;
  overflow: hidden;
  
  // Here is the pseudo element that is going to have a shadow.
  &::after {
    display: block;
    position: absolute;
    content: "";
    box-shadow: $shadow;

    // If this was a fancy mixin, I might try and figure out the 
    // $side based on the $shadow, but I'm lazy.
    
    // Also the top/bottom/width and the right/left/height.  See
    // previous reasoning.
    @if $side == left {
      right: 100%;
      top: -$base-size;
      bottom: -$base-size;
      width: $base-size;
    } @else if $side == right {
      right: 100%;
      top: -$base-size;
      bottom: -$base-size;
      width: $base-size;
    } @else if $side == bottom {
      top: 100%;
      left: -$base-size;
      right: -$base-size;
      height: $base-size;
    } @else {
      bottom: 100%;
      left: -$base-size;
      right: -$base-size;
      height: $base-size;
    }
  }
}

.shadow-top {
  $shadow: 0px 10px 10px 0px rgba(0,0,0,0.55);
  @include side-shadow($shadow, top);
}

SassMeister-output.css

.shadow-top {
  position: relative;
  overflow: hidden; }
  .shadow-top::after {
    display: block;
    position: absolute;
    content: "";
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.55);
    bottom: 100%;
    left: -50px;
    right: -50px;
    height: 50px; }