Mixin to put items on a circle

Mixin to put items on a circle

/**
 * This mixin is forked from talented Hugo Giraudel
 * Mixin to put items on a circle
 * [1] - Allows children to be absolutely positioned
 * [2] - Allows the mixin to be used on a list
 * [3] - In case box-sizing: border-box has been enabled
 * [4] - Allows any type of direct children to be targeted

  // element indexes should be written to the DOM either via backend or JS
  $('.circle-container').children().each(function() {
    $(this).addClass('item'+($(this).index() + 1));
  });

 */

@mixin putOnCircle(
          $nb-items, //Number of items
          $circle-size, //Parent size
          $item-size, //Item size
          $class-for-IE: false //Base class name, false means use of pseudo-selectors
       ) {
  $half-item:     $item-size / 2;
  $half-parent: $circle-size / 2;

  position: relative;               /* [1] */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%;
  list-style: none;                 /* [2] */
  @include box-sizing(content-box); /* [3] */

  li {                             /* [4] */
    display: block;
    position: absolute;
    top:  50%;
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;

    $angle: 360 / $nb-items;
    $rot: 0;
    @for $i from 1 to $nb-items+1 {

      // If no support for IE8-

      @if $class-for-IE == false {
        &:nth-of-type(#{$i}) {
          @include transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg));
        }
      }

      // If support for IE8-

      @else {
        &.#{$class-for-IE}#{$i} {
          // If CSS transforms are not supported
          $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
          $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
          margin: $mt 0 0 $ml;
        }
      }
      $rot: $rot + $angle;
    }
  }
}

.circle-container {
  @include putOnCircle(6, 20em, 6em, false);
  margin: 5em auto 0;
  border: solid 5px tomato;

  a {
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 5px tomato;
  }

  img {
    display: block;
    width: 100%;
    border-radius: 50%;
    @include  filter(grayscale(100%));

    &:hover {
      @include filter(grayscale(0));
    }
  }
}