Circle Mixin – Having a little fun with Sass 3.3 Maps and Random

gistfile1.txt

@mixin circle($radius: 100px, $bg: grey, $color: white) {
	width: $radius;
	height: $radius;
	text-align: center;
	line-height: $radius;
	background-color: $bg;
	color: $color;
	overflow: hidden;
	@include border-radius(50%);

	.circle-content {
		line-height: $line-height-base;
		display: inline-block;
		vertical-align: middle;
		width: 100%;
		padding: 10%;
		font-size: $font-size-small;

		h1,
		h2,
		h3,
		h4,
		h5,
		p {
			margin: 0;
		}
	}
}

$circle-sizes: (
	xs: 50px,
	sm: 100px,
	md: 150px,
	lg: 250px,
	xl: 350px
);

@each $key, $value in $circle-sizes {
	.circle-#{$key} {
		@include circle($value);

		.circle-content {
			@include transform( rotate( random(30) - 10 + deg ) );	
		}
	}
}