Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='container'>

  <h1>SASS - Variables</h1>
  <h2><span>Basic</span> - Getting Started</h2>

  <p id='mypara'>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor <br>
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi</p>

</div>

SassMeister-input.scss

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

/* 
 * Sass Variables are defined with an $ character
 * and can have different kinds of data types: 
 *  color, string, boolean, multi-value
 */
 
$Color1: navy;                            // named color value
$Color2: #333333;                         // hex color value
$StringVar: ". It's awesome";             // string variable 
$FontSize: 18px;                          // numeric value
$border: 1px solid $Color1;              // multi-value variable
$padding: 15px 15px 15px 15px;           // multi-value variable

SassMeister-output.css

/* 
 * Sass Variables are defined with an $ character
 * and can have different kinds of data types: 
 *  color, string, boolean, multi-value
 */

SassMeister-rendered.html

<div class='container'>

  <h1>SASS - Variables</h1>
  <h2><span>Basic</span> - Getting Started</h2>

  <p id='mypara'>Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor <br>
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi</p>

</div>