Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

/* @for */
@for $i from 1 through 3 {
  .item-#{$i} {
    margin-left: 10px * $i;
  }
}

/* @while */
$i: 3;
@while $i > 0 {
  .while-#{$i} { width: 30px * $i; }
  $i: $i - 1;
}

/* array and @each */
// Array/@each demo
$array:('grumpy', 'nyan', 'felix-the');
@each $cat in $array {
  .#{$cat}-cat {
    content: '#{$cat} cat';
  }
}


/* maps and @each */
$mappy-map:(
  key: value,
  another-key: another-value
);

.demo {
  @each $key, $value in $mappy-map {
	  #{$key}: $value;
  }
}


/* button demo */
// Color variables
$darkwing-duck-purple: #582e76;
$launchpad-red: #7e1a03;

// Placeholder selector for @extend
%button {
  border-radius: 3px;
  font-size: 13px;
}

// Mixin
@mixin button($background: blue) {
  @extend %button;

  background: $background;
  border-color: darken($background, 5%);
}

// Map that sets options
$buttons:(
  primary:(
    background: $darkwing-duck-purple,
  ),
  secondary:(
    background: #eee,
  )
);

// Loopy loop loop
@each $type in map-keys($buttons) {
	.button-#{$type} {
	  $button-color: map-get(map-get($buttons, $type), background);

		@include button($button-color);
	}
}

SassMeister-output.css

/* @for */
.item-1 {
  margin-left: 10px;
}

.item-2 {
  margin-left: 20px;
}

.item-3 {
  margin-left: 30px;
}

/* @while */
.while-3 {
  width: 90px;
}

.while-2 {
  width: 60px;
}

.while-1 {
  width: 30px;
}

/* array and @each */
.grumpy-cat {
  content: "grumpy cat";
}

.nyan-cat {
  content: "nyan cat";
}

.felix-the-cat {
  content: "felix-the cat";
}

/* maps and @each */
.demo {
  key: value;
  another-key: another-value;
}

/* button demo */
.button-primary, .button-secondary {
  border-radius: 3px;
  font-size: 13px;
}

.button-primary {
  background: #582e76;
  border-color: #4a2764;
}

.button-secondary {
  background: #eeeeee;
  border-color: #e1e1e1;
}