Generated by SassMeister.com.

SassMeister-input-HTML.html

<h2>nth()</h2>

<code>$hrs: pony, horse, mini-horse, maxi-pony;</code>

<div class="horses-nth-1"></div>
<div class="horses-nth-2"></div>

<div class="clear"></div>

<h2>Loop</h2>
<div class="horses-1"></div>
<div class="horses-2"></div>
<div class="horses-3"></div>
<div class="horses-4"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$hrs: pony horse mini-horse maxi-pony;

[class^="horses"] {
  padding: 30px;
  float: left;
  margin-right: 20px;
  background: Cyan;
}

.horses-first {
  &:after {
    content: "first($hrs) = #{first($hrs)}";
  }
}

.horses-nth-1 {
  &:after {
    content: "nth($hrs, 1) = #{nth($hrs, 1)}";
  }
}

.horses-nth-2 {
  &:after {
    content: "nth($hrs, -1) = #{nth($hrs, -1)}";
  }
}

@for $i from 1 through length($hrs) {
  .horses-#{$i} {
    &:after {
      content: "#{$i}. #{nth($hrs, $i)}";
    }
  }
}

// Reset stuff
* {
  margin: 0 0 20px;
}

body {
  margin: 20px;
  font-family: sans-serif;
}

code {
  display: block;
}

.clear {
  clear: both;
  margin: 0;
}

SassMeister-output.css

[class^="horses"] {
  padding: 30px;
  float: left;
  margin-right: 20px;
  background: Cyan;
}

.horses-first:after {
  content: "first($hrs) = first(pony horse mini-horse maxi-pony)";
}

.horses-nth-1:after {
  content: "nth($hrs, 1) = pony";
}

.horses-nth-2:after {
  content: "nth($hrs, -1) = maxi-pony";
}

.horses-1:after {
  content: "1. pony";
}

.horses-2:after {
  content: "2. horse";
}

.horses-3:after {
  content: "3. mini-horse";
}

.horses-4:after {
  content: "4. maxi-pony";
}

* {
  margin: 0 0 20px;
}

body {
  margin: 20px;
  font-family: sans-serif;
}

code {
  display: block;
}

.clear {
  clear: both;
  margin: 0;
}

SassMeister-rendered.html

<h2>nth()</h2>

<code>$hrs: pony, horse, mini-horse, maxi-pony;</code>

<div class="horses-nth-1"></div>
<div class="horses-nth-2"></div>

<div class="clear"></div>

<h2>Loop</h2>
<div class="horses-1"></div>
<div class="horses-2"></div>
<div class="horses-3"></div>
<div class="horses-4"></div>