Sass Mixin

<div class="u-flex u-gap-xs">
<span class="p-mixin-arrow -up"></span>
<span class="p-mixin-arrow -right"></span>
<span class="p-mixin-arrow -down"></span>
<span class="p-mixin-arrow -left"></span>
</div> 

.p-mixin-arrow {
  display: inline-block;
  &.-up {
    @include g.arrow("up", 12px);
  }
  &.-right {
    @include g.arrow("right", 12px);
  }
  &.-down {
    @include g.arrow("down", 12px);
  }
  &.-left {
    @include g.arrow("left", 12px);
  }
}

<div class="u-flex u-gap-xs">
<span class="p-mixin-triangle -up"></span>
<span class="p-mixin-triangle -right"></span>
<span class="p-mixin-triangle -down"></span>
<span class="p-mixin-triangle -left"></span>
<span class="p-mixin-triangle -top-left"></span>
<span class="p-mixin-triangle -top-right"></span>
<span class="p-mixin-triangle -bottom-left"></span>
<span class="p-mixin-triangle -bottom-right"></span>
</div> 

.p-mixin-triangle {
  &.-up {
    @include g.triangle("up", 12px, 12px);
  }
  &.-right {
    @include g.triangle("right", 12px, 12px);
  }
  &.-down {
    @include g.triangle("down", 12px, 12px);
  }
  &.-left {
    @include g.triangle("left", 12px, 12px);
  }
  &.-top-left {
    @include g.triangle("top-left", 12px, 12px);
  }
  &.-top-right {
    @include g.triangle("top-right", 12px, 12px);
  }
  &.-bottom-left {
    @include g.triangle("bottom-left", 12px, 12px);
  }
  &.-bottom-right {
    @include g.triangle("bottom-right", 12px, 12px);
  }
}

<p class="p-mixin-pseudo"></p> 

.p-mixin-pseudo {
  position: relative;
  &::before {
    @include g.pseudo-base("before");
  }
  &::after {
    @include g.pseudo-base("after");
    @include g.pseudo-center;
  }
}