A CodePen by Bermon Painter. Variables

index.html

<h1>Variables</h1>
<p>Think of variables as handy places to store values that you want to reuse over and over again throughout your Sass document. Good examples for using a variable is to store font stacks, common margin and padding, font sizes, & colors.</p>

<ol>
  <li>Sans Serif Font Stack</li>
  <li>Serif Font Stack</li>
  <li>Accent Color</li>
</ol>

style.scss

@import "compass";
// Variables
$sans-serif-font-stack: "Helvetica Nueue", Arial, Sans Serif;
$serif-font-stack: Georgia, "Times New Roman", Serif;

$header-font-size: 20px;
$text-color: #333;
$accent-color: red;

$container-width: 500px;

// Rules
body {
  color: $text-color;
  width: $container-width;
}
h1 {
  font-size: $header-font-size;
}
ol {
  li:first-child {
    font-famiy: $sans-serif-font-stack;
  } 
  li:nth-child(2n) {
    font-family: $serif-font-stack;
  }
  li:last-child {
    color: $accent-color;
  }
}