Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Advanced Sass Techniques</h1>

<h2>Dry-ify your output with @extend</h2>

<p>To style elements that share a lot of common rules, but differ slightly,
  you can use a placehodler selector and @extend. Take a look at the Sass and 
  output CSS for the headings to see it in action.
</p>
<p>Try it out yourself by styling the h3 with %heading-base and some custom rules.</p>

<h2>Super time saving with @each</h2>

<p>You can programatically generate similar CSS rules by looping over a 
collection with @each.  All the CSS for the flag background images on this 
list have been generated with a few lines of Sass. This also means it's super 
quick to add more.</p>
<p>Try adding another country to the list. Use the 
  <a href="http://www.nationsonline.org/oneworld/country_code_list.htm">2 digit ISO code</a> 
  as a class and add it to the Sass $countries collection.</p>
<ul class="countries">
  <li class="br">Brazil</li>
  <li class="ca">Canada</li>
  <li class="de">Germany</li>
  <li class="in">India</li>
  <li class="ph">Phillipines</li>
</ul>

<h2>Organizing your files with @import</h2>
<p>You can keep big CSS projects organized using smaller 
  files called partials.</p>
<p>Create a partial by starting your filename with an underscore</p>
<pre><code>_typhography.scss</code></pre>
<p>Partials don't get compiled on their own. Instead,
use @import to include them in your main style sheet.
</p>
<pre><code>@import "typography";</code></pre>
<p>Break it up into as many peices as you want. Here's
  an example of how you might structure a project.
</p>
<pre><code>
// ===========================================
// BASE STYLES
// ===========================================
@import "vars";
@import "mixins;
@import "normalize";
@import "layout";
@import "type";
@import "forms";
@import "animations";

// ===========================================
// VENDOR STYLES
// ===========================================
@import "vendor/icomoon";
@import "vendor/flexslider;

// ===========================================
// COMPONENTS
// ===========================================;
@import "components/buttons";
@import "compoents/contact-form";
@import "compoents/profiles";

// ===========================================
// REGIONS
// ===========================================
@import "header";
@import "footer";
@import "blog";
@import "about";
</code></pre>
<p>BONUS: if your partails contain commonly used code,
you can re-use them across projects!
</p>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

%heading-base {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.1em;
}

h1 {
  @extend %heading-base;
  font-size: 50px;
  color: #b44;
}

h2 {
  @extend %heading-base;
  font-size: 20px;
  margin-top: 2em;
}

/* use @extend to write your own h3 rule */
h3 {
  
}

ul.countries li{
  display: inline-block;
  padding-left: 25px;
  margin: 10px;
  list-style: none;
  background-repeat: no-repeat;
  background-size: 20px;
}

/*list all the country codes in a collection */
/* try adding a new country to the list! */
$countries: ("br", "ca", "de", "in", "ph");

/* loop over the list to generate background 
image rules */
/* NOTE: the # { } is called "string interpollation.
It lets us put the text inside a variable 
within or next to other text characters */

@each $country in $countries {
  .#{$country} {
    background-image: url("http://zone.brennaobrien.com/flags/#{$country}.svg");
  }
}


/* setup styles, you can ignore these */
body {
   font-family: "Helvetica", "Arial", sans-serif;
   max-width: 1000px;
   margin: 0 auto;
}

p {
  line-height: 1.5;
}

a {
  color: #b44;
}

pre {
  background: #dedede;
  padding: 10px;
}

SassMeister-output.css

h1, h2 {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0.1em;
}

h1 {
  font-size: 50px;
  color: #b44;
}

h2 {
  font-size: 20px;
  margin-top: 2em;
}

/* use @extend to write your own h3 rule */
ul.countries li {
  display: inline-block;
  padding-left: 25px;
  margin: 10px;
  list-style: none;
  background-repeat: no-repeat;
  background-size: 20px;
}

/*list all the country codes in a collection */
/* try adding a new country to the list! */
/* loop over the list to generate background 
image rules */
/* NOTE: the # { } is called "string interpollation.
It lets us put the text inside a variable 
within or next to other text characters */
.br {
  background-image: url("http://zone.brennaobrien.com/flags/br.svg");
}

.ca {
  background-image: url("http://zone.brennaobrien.com/flags/ca.svg");
}

.de {
  background-image: url("http://zone.brennaobrien.com/flags/de.svg");
}

.in {
  background-image: url("http://zone.brennaobrien.com/flags/in.svg");
}

.ph {
  background-image: url("http://zone.brennaobrien.com/flags/ph.svg");
}

/* setup styles, you can ignore these */
body {
  font-family: "Helvetica", "Arial", sans-serif;
  max-width: 1000px;
  margin: 0 auto;
}

p {
  line-height: 1.5;
}

a {
  color: #b44;
}

pre {
  background: #dedede;
  padding: 10px;
}

SassMeister-rendered.html

<h1>Advanced Sass Techniques</h1>

<h2>Dry-ify your output with @extend</h2>

<p>To style elements that share a lot of common rules, but differ slightly,
  you can use a placehodler selector and @extend. Take a look at the Sass and 
  output CSS for the headings to see it in action.
</p>
<p>Try it out yourself by styling the h3 with %heading-base and some custom rules.</p>

<h2>Super time saving with @each</h2>

<p>You can programatically generate similar CSS rules by looping over a 
collection with @each.  All the CSS for the flag background images on this 
list have been generated with a few lines of Sass. This also means it's super 
quick to add more.</p>
<p>Try adding another country to the list. Use the 
  <a href="http://www.nationsonline.org/oneworld/country_code_list.htm">2 digit ISO code</a> 
  as a class and add it to the Sass $countries collection.</p>
<ul class="countries">
  <li class="br">Brazil</li>
  <li class="ca">Canada</li>
  <li class="de">Germany</li>
  <li class="in">India</li>
  <li class="ph">Phillipines</li>
</ul>

<h2>Organizing your files with @import</h2>
<p>You can keep big CSS projects organized using smaller 
  files called partials.</p>
<p>Create a partial by starting your filename with an underscore</p>
<pre><code>_typhography.scss</code></pre>
<p>Partials don't get compiled on their own. Instead,
use @import to include them in your main style sheet.
</p>
<pre><code>@import "typography";</code></pre>
<p>Break it up into as many peices as you want. Here's
  an example of how you might structure a project.
</p>
<pre><code>
// ===========================================
// BASE STYLES
// ===========================================
@import "vars";
@import "mixins;
@import "normalize";
@import "layout";
@import "type";
@import "forms";
@import "animations";

// ===========================================
// VENDOR STYLES
// ===========================================
@import "vendor/icomoon";
@import "vendor/flexslider;

// ===========================================
// COMPONENTS
// ===========================================;
@import "components/buttons";
@import "compoents/contact-form";
@import "compoents/profiles";

// ===========================================
// REGIONS
// ===========================================
@import "header";
@import "footer";
@import "blog";
@import "about";
</code></pre>
<p>BONUS: if your partails contain commonly used code,
you can re-use them across projects!
</p>

http://sassmeister.com/gist/f2502d140211c4c5cfc1