Sass Variables

SassMeister-input-HTML.html

<div>
  <h1>This text is red</h1>
  <p>Yet paragraphs are blue. <a href="#">Links are blue too.</a></p>
</div>

SassMeister-input.scss

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

// set a global variable
$myColor: blue;

p {
  color: $myColor;
}

h1 {
  // now you can overwrite $myColor
  // as a nested variable here
  $myColor: orange;
  color: $myColor;
}

a {
  color: $myColor;
  text-decoration: underline;
}

SassMeister-output.css

p {
  color: blue;
}

h1 {
  color: orange;
}

a {
  color: blue;
  text-decoration: underline;
}

SassMeister-rendered.html

<div>
  <h1>This text is red</h1>
  <p>Yet paragraphs are blue. <a href="#">Links are blue too.</a></p>
</div>