An attempt to port cssarrowplease.com to a Less mixin in order to make the if/else approach in http://hugogiraudel.com/2012/11/13/less-to-sass/ look dumb

cssarrowsplease.less

@arrow_box_size: 30px;
@arrow_box_color: #88b7d5;
@arrow_box_border_width: 4px;
@arrow_box_border_color: #c2e1f5;
.arrow_box {
	position: relative;
	background: @arrow_box_color;
	border: @arrow_box_border_width solid @arrow_box_border_color;
	
	&:after, &:before {
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	&:after {
		border-color: rgba(136, 183, 213, 0);
		border-width: @arrow_box_size;
	}
	&:before {
		border-color: rgba(194, 225, 245, 0);
		border-width: @arrow_box_size + 6px;
	}
}
.arrow_box(@direction) {
	&:extend(.arrow_box);
	
	& when (@direction = top), (@direction = bottom) {
		&:after, &:before { left: 50%; }
		&:after { margin-left: -(@arrow_box_size); }
		&:before { margin-left: -(@arrow_box_size + 6px); }
		
		& when (@direction = top) {
			&:after, &:before { bottom: 100%; }
			&:after { border-bottom-color: @arrow_box_color; }
			&:before { border-bottom-color: @arrow_box_border_color; }
		}
		& when (@direction = bottom) {
			&:after, &:before { top: 100%; }
			&:after { border-top-color: @arrow_box_color; }
			&:before { border-top-color: @arrow_box_border_color; }
		}
	}
	& when (@direction = left), (@direction = right) {
		&:after, &:before { top: 50%; }
		&:after { margin-top: -(@arrow_box_size); }
		&:before { margin-top: -(@arrow_box_size + 6px); }
		
		& when (@direction = left) {
			&:after, &:before { right: 100%; }
			&:after { border-right-color: @arrow_box_color; }
			&:before { border-right-color: @arrow_box_border_color; }
		}
		& when (@direction = right) {
			&:after, &:before { left: 100%; }
			&:after { border-left-color: @arrow_box_color; }
			&:before { border-left-color: @arrow_box_border_color; }
		}
	}
}