More elegant Sass @mixin to create pseudo-element shapes
Refactoring

You can DRY this up a bit by taking advantage of lists and the zip function.

@mixin triangle($dir, $color, $size, $leg1: $size, $leg2: $leg1) {
    $sides:
        0,
        $leg1 solid transparent,
        $size solid $color,
        $leg2 solid transparent;

    $order:
        ( top: top right bottom left
        , right: right bottom left top
        , bottom: bottom right top left
        , left: left bottom right top);

    $x: zip(map-get($order, $dir), $sides);

    border: {
        @each $p, $s in $x {
            #{$p}: $s;
        }
    }
}


Misc.

Avoid using abbreviated variable names like $clr.  It might seem obvious to you that it's short for color, but I have a product sitting under my sink called CLR.  I had to read the mixin's code in order for me to discern what it was supposed to be for.

I've modified the argument order here and added some defaults so that you only have to give 1 piece of size information if you want an equilateral triangle, 2 pieces will give you an isosceles.  You probably don't really need that last argument, but I threw it in anyway.

Improving further

I don't have time at the moment to go into this, but things could further be improved by doing the following:


Specifying height/width rather than the desired border width
Using shorthand


You can see what I mean by looking over the results from a CSS triangle generator