Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>A lone button</h1>
<p>Etiam porta sen malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla non meths actor fringilla.</a> Cras justo odapibus ac facilisis in egestas get quam.</p>
<p><a class="btn" href="#">Button</a></p>

<h1>A button within scoped content</h1>
<div class="scopedContent">
  <p>Etiam porta sen malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla non meths actor fringilla.</a> Cras justo odapibus ac facilisis in egestas get quam.</p>
  <p><a class="btn" href="#">Button</a></p>
</div>

SassMeister-input.sass

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

// Global
body
  color: grey
  font-family: helvetica, arial, sans-serif
a
  color: inherit
  text-decoration: none

// Button module
// Output the following to an IE8 stylesheet
// .scopedContent .btn
.btn
  color: white
  background-color: red
  padding: 0.5em 1em
  border-radius: 0.333em
  text-decoration: none
  
  &:hover, &:focus
    color: #000
    background-color: skyblue

// Scoped stuff
.scopedContent
  a:not(.btn)
    color: red
    text-decoration: underline
  
    &:hover, &:focus
      color: blue
      text-decoration: none

SassMeister-output.css

body {
  color: gray;
  font-family: helvetica, arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.btn {
  color: white;
  background-color: red;
  padding: 0.5em 1em;
  border-radius: 0.333em;
  text-decoration: none;
}
.btn:hover, .btn:focus {
  color: black;
  background-color: skyblue;
}

.scopedContent a:not(.btn) {
  color: red;
  text-decoration: underline;
}
.scopedContent a:not(.btn):hover, .scopedContent a:not(.btn):focus {
  color: blue;
  text-decoration: none;
}

SassMeister-rendered.html

<h1>A lone button</h1>
<p>Etiam porta sen malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla non meths actor fringilla.</a> Cras justo odapibus ac facilisis in egestas get quam.</p>
<p><a class="btn" href="#">Button</a></p>

<h1>A button within scoped content</h1>
<div class="scopedContent">
  <p>Etiam porta sen malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla non meths actor fringilla.</a> Cras justo odapibus ac facilisis in egestas get quam.</p>
  <p><a class="btn" href="#">Button</a></p>
</div>