Generated by SassMeister.com.

SassMeister-input.scss

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

/* Control Directives & Expressions */

// @each directive usage
@each $section, $color in ('featured', red), ('about', green) {
  .section-#{$section} {
    background: $color;
  }
}

/* Same example with Map */
$section-colors: (
  'featured': red,
  'about': green
);

@each $section, $color in $section-colors {
  .section-#{$section} {
    background: $color;
  }
}

/* Different data */
@each $section in featured, about, contact {
  ##{$section}-section {
    background-image: url('img/#{$section}.jpg');
  }
}

/* Headings */
$headings: (
  h1: 4em,
  h2: 2.8em,
  h3: 2em,
  h4: 1.2em
);

@each $element, $size in $headings {
  #{$element} {
    font-size: $size;
  }
}

// @while directive usage
$i: 1;
@while $i <= 10 {
  .item-#{$i} {
    top: 5em * $i;
    $i: $i + 1;
  }
}

$x: 1;
@while $x <= 4 {
  h#{$x} {
    font-size: map-get($headings, h#{$x});
  }
  $x: $x + 1;
}

SassMeister-output.css

/* Control Directives & Expressions */
.section-featured {
  background: red;
}

.section-about {
  background: green;
}

/* Same example with Map */
.section-featured {
  background: red;
}

.section-about {
  background: green;
}

/* Different data */
#featured-section {
  background-image: url("img/featured.jpg");
}

#about-section {
  background-image: url("img/about.jpg");
}

#contact-section {
  background-image: url("img/contact.jpg");
}

/* Headings */
h1 {
  font-size: 4em;
}

h2 {
  font-size: 2.8em;
}

h3 {
  font-size: 2em;
}

h4 {
  font-size: 1.2em;
}

.item-1 {
  top: 5em;
}

.item-2 {
  top: 10em;
}

.item-3 {
  top: 15em;
}

.item-4 {
  top: 20em;
}

.item-5 {
  top: 25em;
}

.item-6 {
  top: 30em;
}

.item-7 {
  top: 35em;
}

.item-8 {
  top: 40em;
}

.item-9 {
  top: 45em;
}

.item-10 {
  top: 50em;
}

h1 {
  font-size: 4em;
}

h2 {
  font-size: 2.8em;
}

h3 {
  font-size: 2em;
}

h4 {
  font-size: 1.2em;
}