Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>I (Heart) Sass!</h1>
<p>
  We’re just getting to know Sass - say 
  <q>“hello”</q>.
</p>
<a href="#" class="primary">HELLO</a>
<a href="#" class="secondary">Goodbye</a>

SassMeister-input.scss

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

$color-background : #FFF;
$color-body       : #666;
$color-highlight  : #000;

$color-primary    : #FC0;
$color-secondary  : #CF0;

body {
  background: $color-background;
  color: $color-body;
}
 
h1 {
  color: $color-primary;
}
 
q {
  color: $color-highlight;
}
 
a {
  color: $color-background;
  display: inline-block;
  padding: 20px;
  
  &.primary {
    background-color: $color-primary;
  }

  &.secondary {
    background-color: $color-secondary;
  }
} 

SassMeister-output.css

body {
  background: #FFF;
  color: #666;
}

h1 {
  color: #FC0;
}

q {
  color: #000;
}

a {
  color: #FFF;
  display: inline-block;
  padding: 20px;
}
a.primary {
  background-color: #FC0;
}
a.secondary {
  background-color: #CF0;
}

SassMeister-rendered.html

<h1>I (Heart) Sass!</h1>
<p>
  We’re just getting to know Sass - say 
  <q>“hello”</q>.
</p>
<a href="#" class="primary">HELLO</a>
<a href="#" class="secondary">Goodbye</a>