LessCSS Mixing for Providing Arrows

arrowgasm.less

.arrowgasm(@position: top, @size : "4px", @background-color :  #88b7d5, @border-width: "2px", @border-color : #c2e1f5, @arrowClass : "arrow_box"){
      
         (~".@{arrowClass}") {
            position: relative;
            background: @background-color;
            border: @size solid @border-color;
        }
        (~".@{arrowClass}:after"), (~".@{arrowClass}:before") {
                bottom: 100%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
        }

        (~".@{arrowClass}:after") {
                .b(@position, @background-color);
                border-width: @size;
                left: 50%;
                margin-left: @size * -1;
        }
        (~".@{arrowClass}:before") {
               .b(@position, @border-color);
                border-width: @size + @border-width ;
                left: 50%;
                margin-left: ( @size + @border-width ) * -1;
        }
       .b(top, @border-color)   { border-bottom-color: @border-color; }
       .b(right, @border-color) { border-left-color: @border-color;   }
       .b(bottom, @border-color){ border-top-color: @border-color;    }
       .b(left, @border-color)  { border-right-color: @border-color; }
    }