sass mixin to "bubblify" a DOM element

bubblify.scss

p.bubble {
  background: #6bc384;
  color: #fff;
  @include bubblify('right', #6bc384, 8px);
}

@mixin bubblify($dir, $color, $size: 10px) {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;

    @if $dir == 'top' or $dir == 'bottom' {
      border-color: $color transparent;
      left: 50%;
      margin-left: -$size;
    } @else {
      border-color: transparent $color;
      top: 50%;
      margin-top: -$size;
    }

    @if $dir == 'left' {
      border-width: $size $size $size 0;
      left: -$size;
    } @else if $dir == 'right' {
      border-width: $size 0 $size $size;
      right: -$size;
    } @else if $dir == 'top' {
      border-width: 0 $size $size;
      top: -$size;
    } @else if $dir == 'bottom' {
      border-width: $size $size 0;
      bottom: -$size;
    }
  }
}