SASS

Mixin - Example 3 with for loop

HTML

Advanced Mixin usage with for loop

SCSS

$rotate-origin : -200% 0%;
$class-slug: "item";
$debug : true; // set true to add red border to divs

@mixin debug{
  @if $debug{
    border:1px solid red;
  }
}

@mixin rotate ($angle) {
  $angle : $angle + 0deg; // add units, change 10 to 10deg
transform: rotate($angle); // W3C
-webkit-transform: rotate($angle); // Safari & Chrome
-moz-transform: rotate($angle); // Firefox 
-ms-transform: rotate($angle); // Internet Explorer
-o-transform: rotate($angle); // Opera

transform-origin: $rotate-origin; // W3C
-webkit-transform-origin: $rotate-origin; // Safari & Chrome
-moz-transform-origin: $rotate-origin; // Firefox 
-ms-transform-origin: $rotate-origin; // Internet Explorer
-o-transform-origin: $rotate-origin; // Opera

}


div {
  @include debug();
  position:absolute;
  top:120px;
  left:250px;
  margin:70px;
  width:50px;
}


@for $i from 0 through 36 {
  .#{$class-slug}-#{$i} {
    @include rotate($i * 10);
  }
}

JavaScript

for (var x=0; x < 36; x++){
	$('body').append(
  	"<div class='item-" + x + "'>Hello</div>"
  );
}