SCSS mixin to solve your tooltip pointer troubles forever

I guess you know the CSS trick to draw pure CSS triangles, right? Have you ever tried to use this trick to draw the tooltip pointer? Many tooltips designs contains border and CSS triangle attached to this tooltip looks just no good. But well, you can use two triangles. One triangle is of the desired size and background-color of tooltip's border color. And the second triangle to be just 2 pixel narrower than first triangle, positioned just above the first one, and of the color of main tooltip background. To hide the tooltip border on the triangle (pointer) edge, you should -1px margin it in the direction of tooltip. And the main trick, you can use :after and :before of tooltip object to draw the pointer.
Well, I used this trick on and on and on... and I became bored, so I've wrote a SCSS mixin to make my life a lot easier. So, here is a link to a working plunker, where you can freely try it out. https://plnkr.co/edit/Eaq63K?p=preview

You can use this mixin no harder than:
@include pointer('bottom', 30px, (black, white), 15px);

As you can see, I'm using BEM methodology for class naming, so no conflicts are expected.

Happy coding! :D