Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

/* Control Directives & Expressions */

// @for directive usage
@for $i from 1 through 3 {
  .foo-#{$i} {
    background: #000;
    font-size: 1em + $i;
  }
}

// @if directive usage
$theme: "neutral";

@if $theme == "neutral" {
  body {
    background: transparent;
  }
} @else if $theme == "blah" {
  body {
    background: #fff;
  }
} @else {
  body {
    background: #ccc;
  }
}

SassMeister-output.css

/* Control Directives & Expressions */
.foo-1 {
  background: #000;
  font-size: 2em;
}

.foo-2 {
  background: #000;
  font-size: 3em;
}

.foo-3 {
  background: #000;
  font-size: 4em;
}

body {
  background: transparent;
}