Sassy Shape Machine Mixin :) Make Sassy shapes in seconds!

sassy-shapes

// Some cute colors:
$color1: #967bd3;
$color2: #c8815b;
$color3: #8cd6d8;
$color4: #bee6b6;
$color5: #dd9bb9;
$color6: #c4b5e6;
$color7: #cb6363;

//Here's where you make the shapes!
.square{
	@include shape(square, 50px, $color1);
}

.circle{
	@include shape(circle, 50px, $color2);
}

.triangle{
	@include shape(triangle, 50px, $color3);
}

.right-triangle {
	@include shape(right-triangle, 50px, $color4)
}

.diamond{
	@include shape(diamond, 50px, $color5);
}

.pentagon {
	@include shape(pentagon, 50px, $color6);
}

.hexagon {
	@include shape(hexagon, 50px, $color7)
}

shape-mixin

// Sassy Shape Machine Mixin!

@mixin shape($shape, $size, $color){
	@if $shape == square {
		width: $size;
		height: $size;
		background-color: $color;
	}
	@if $shape == circle {
		width: $size;
		height: $size;
		background-color: $color;
		border-radius: 50%;
	}
	@if $shape == triangle {
		width: 0;
		height: 0;
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size*1.5 solid $color;
	}
	@if $shape == right-triangle {
		width: 0;
		height: 0;
		border-bottom: $size solid $color;
		border-right: $size solid transparent;
	}
	@if $shape == diamond {
		width: 0;
		height: 0;
		border: $size solid transparent;
		border-bottom-color: $color;
		position: relative;
		top: -$size;
	
		&:after {
			content: '';
			position: absolute;
			left: -$size;
			top: $size;
			width: 0;
			height: 0;
			border: $size solid transparent;
			border-top-color: $color;
		}
	}
	@if $shape == pentagon {
		position: relative;
		width: $size;
		border-width: (25/27)*$size (1/3)*$size 0;
		border-style: solid;
		border-color: $color transparent;
		
		&:before {
			content: "";
			position: absolute;
			height: 0;
			width: 0;
			top: (-17/11)*$size;
			left: (-1/3)*$size;
			border-width: 0 (5/6)*$size (35/54)*$size;
			border-style: solid;
			border-color: transparent transparent $color;
		}
	}
	@if $shape == hexagon {
		width: $size*2;
		height: $size*1.1;
		background: $color;
		position: relative;
		&:before {
			content: "";
			position: absolute;
			top: $size/-2;
			left: 0;
			width: 0;
			height: 0;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-bottom: $size/2 solid $color;
		}
		&:after {
			content: "";
			position: absolute;
			bottom: $size/-2;
			left: 0;
			width: 0;
			height: 0;
			border-left: $size solid transparent;
			border-right: $size solid transparent;
			border-top: $size/2 solid $color;
		}
	}
	@if shape == octagon {
		width: $size;
		height: $size;
		background: transparent;
		position: relative;
		text-align: center;
	
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			border-bottom: 29/$size solid $color;
			border-left: 29/$size solid transparent;
			border-right: 29/$size solid transparent;
			width: 42/$size;
			height: 0;
		}
		
		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: 29/$size solid $color;
			border-left: 29/$size solid transparent;
			border-right: 29/$size solid transparent;
			width: 42/$size;
			height: 0;
		}
	}
}