吹き出しの矢印を簡単につけるミックスインをつくってみた

@mixin balloon-arrow($aspect: top, $position: 50%, $color: #fff, $size: 10px){

@if $color == #fff{
	$color : $color - #333;
}

border: 1px solid $color;

&:after{
	content:'';
	position: absolute;
	border: $size solid transparent;

	@if $aspect == top {
		border-bottom-color: $color;
		border-top-width: 0;
		margin-left: - $size;
		top: - $size;
		left: $position;
	} @else if $aspect == bottom {
		border-top-color: $color;
		border-bottom-width: 0;
		margin-left: - $size;
		bottom: - $size;
		left: $position;
	} @else if $aspect == right{
		border-left-color: $color;
		border-right-width: 0;
		margin-top: - $size;
		right: - $size;
		top: $position;
		left: auto;
	} @else if $aspect == left{
		border-right-color: $color;
		border-left-width: 0;
		margin-top: - $size;
		left: - $size;
		top: $position;
	}
}

}