Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>EBS is SASSy</h1>
<p>Sunt laborum accusamus Marfa, Thundercats butcher irony bitters. Letterpress delectus non, Etsy sint officia tofu forage et. Readymade pop-up cornhole, Marfa assumenda hoodie paleo photo booth vinyl. Keytar kitsch pork belly wolf. Tofu tempor sunt paleo food truck occupy cardigan, iPhone ex excepteur quinoa small batch odio ethical aliquip. Consectetur +1 gastropub tattooed keytar reprehenderit, slow-carb assumenda polaroid VHS duis fanny pack do synth. Hella Tonx tousled, chillwave aliquip beard consequat master cleanse PBR irony cupidatat vinyl nostrud. And a <a>Regular Link</a>.</p>
<a class="button">Button</a>

SassMeister-input.scss

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

// Lets define some colors
$color_1: rgb(159,28,25);
$color_2: #ccc;
$color_3: darken($color_2, 20%);
$color_4: rgb(255,133,0);
// Lets define some fonts
$base_font_size: 14px;
$meta_font_size: .8em;
// And maybe a base padding
$base_padding: 20px;

// Now lets tell our project to set the base font size
body {
  font-size: $base_font_size;
}
//And set a base h1. 3x the size of the body
h1 {
  font-size: 3em;
}

// Now lets style some links
a {
  color: $color_1;
    // Now what happens on hover
    &:hover {
      color :$color_4;
    }
  // Now lets Define a spcific link of class "button"
  &.button {
    display:block;
    text-align:center;
    background-color: $color_2;
    padding: $base_padding;
      &:hover {
      background-color: $color_3;
      }
    }
  }

SassMeister-output.css

body {
  font-size: 14px;
}

h1 {
  font-size: 3em;
}

a {
  color: #9f1c19;
}
a:hover {
  color: #ff8500;
}
a.button {
  display: block;
  text-align: center;
  background-color: #ccc;
  padding: 20px;
}
a.button:hover {
  background-color: #999999;
}

SassMeister-rendered.html

<h1>EBS is SASSy</h1>
<p>Sunt laborum accusamus Marfa, Thundercats butcher irony bitters. Letterpress delectus non, Etsy sint officia tofu forage et. Readymade pop-up cornhole, Marfa assumenda hoodie paleo photo booth vinyl. Keytar kitsch pork belly wolf. Tofu tempor sunt paleo food truck occupy cardigan, iPhone ex excepteur quinoa small batch odio ethical aliquip. Consectetur +1 gastropub tattooed keytar reprehenderit, slow-carb assumenda polaroid VHS duis fanny pack do synth. Hella Tonx tousled, chillwave aliquip beard consequat master cleanse PBR irony cupidatat vinyl nostrud. And a <a>Regular Link</a>.</p>
<a class="button">Button</a>