SCSS: Rotating Knob

knob.scss

@mixin knob($size,$color) {
	$darkColor: darken($color, 15%);
	$shadowColor: darken($darkColor,10%);
	$lightColor: lighten($color, 15%);
	$knobSize: $size * 0.8;
	$dotSize: $size/8;

	width:$size;
	height:$size;
	background-color: rgba(255,0,0,0.1);
	position: relative;
	@include border-radius($size/2);
	@include background-image(linear-gradient(top,$darkColor 20%,$color));
	@include box-shadow(inset 0px 5px 5px $shadowColor, 0 0 2px 1px $shadowColor);
	&:before {
		content: "";
		position: absolute;
		width:$dotSize;
		height:$dotSize;
		background-color: $color;
		top:($size - $knobSize)/2 + $dotSize;
		left:($size - $dotSize)/2;
		z-index:2;
		@include box-shadow(inset 0px $dotSize/8 $dotSize/8 $darkColor, 0 0 0 1px $darkColor);
		@include border-radius($dotSize/2);
		@include apply-origin($dotSize/2 $knobSize/2 - $dotSize, false);
	};
	&:after {
		content: "";
		position: absolute;
		width: $knobSize;
		height: $knobSize;
		background-color: $color;
		top:($size - $knobSize)/2;
		left:($size - $knobSize)/2;
		@include box-shadow(0 0 0 2px $darkColor, 0 $size * 0.05 $size * 0.05 $shadowColor);
		@include background-image(linear-gradient(bottom,$darkColor 20%,$color));
		@include border-radius($knobSize/2);
	};
}

@for $angle from 0 to 100 {
	.knob[value='#{$angle}']:before {
		@include rotate($angle*3.6deg);
	}
}