Sass Looping

I have to blog this down.

$slugs: "xs", "sm", "md", "lg";
 
body {
  &.debug {

    @for $i from 0 through 12 {
      .col-#{$i} {
        background: darken(#fefefe, $i);
      }

      @each $slug in $slugs {

        .col-#{$slug}-#{$i} {
          @extend .col-#{$i};
        }
      }

    }

  }
}

… will compile to

body.debug .col-0, body.debug .col-xs-0, body.debug .col-sm-0, body.debug .col-md-0, body.debug .col-lg-0 {
  background: #fefefe;
}
body.debug .col-1, body.debug .col-xs-1, body.debug .col-sm-1, body.debug .col-md-1, body.debug .col-lg-1 {
  background: #fbfbfb;
}
body.debug .col-2, body.debug .col-xs-2, body.debug .col-sm-2, body.debug .col-md-2, body.debug .col-lg-2 {
  background: #f9f9f9;
}
body.debug .col-3, body.debug .col-xs-3, body.debug .col-sm-3, body.debug .col-md-3, body.debug .col-lg-3 {
  background: #f6f6f6;
}
body.debug .col-4, body.debug .col-xs-4, body.debug .col-sm-4, body.debug .col-md-4, body.debug .col-lg-4 {
  background: #f4f4f4;
}
body.debug .col-5, body.debug .col-xs-5, body.debug .col-sm-5, body.debug .col-md-5, body.debug .col-lg-5 {
  background: #f1f1f1;
}
body.debug .col-6, body.debug .col-xs-6, body.debug .col-sm-6, body.debug .col-md-6, body.debug .col-lg-6 {
  background: #efefef;
}
body.debug .col-7, body.debug .col-xs-7, body.debug .col-sm-7, body.debug .col-md-7, body.debug .col-lg-7 {
  background: #ececec;
}
body.debug .col-8, body.debug .col-xs-8, body.debug .col-sm-8, body.debug .col-md-8, body.debug .col-lg-8 {
  background: #eaeaea;
}
body.debug .col-9, body.debug .col-xs-9, body.debug .col-sm-9, body.debug .col-md-9, body.debug .col-lg-9 {
  background: #e7e7e7;
}
body.debug .col-10, body.debug .col-xs-10, body.debug .col-sm-10, body.debug .col-md-10, body.debug .col-lg-10 {
  background: #e5e5e5;
}
body.debug .col-11, body.debug .col-xs-11, body.debug .col-sm-11, body.debug .col-md-11, body.debug .col-lg-11 {
  background: #e2e2e2;
}
body.debug .col-12, body.debug .col-xs-12, body.debug .col-sm-12, body.debug .col-md-12, body.debug .col-lg-12 {
  background: #dfdfdf;
}

Way cool.