Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>
  <a href="#" class="cta-primary">Learn more</a>
</p>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Color Schemer (v0.2.8)
// ----

@import "color-schemer";
// Sass color functions use HSL https://robots.thoughtbot.com/controlling-color-with-sass-color-functions

$brand-primary: #C00;
// note the darken function in the hover state


p {
    font-family: "Overpass",Overpass,Helvetica,helvetica,arial,sans-serif;
    font-size: 16px;
}
.cta-primary {
  background-color: $brand-primary;
  color: #fff;
  display: inline-block;
  border: 0;
  font-size: 1.6rem;
  padding: 9px 40px;
  line-height: 1.2;
  padding: .9rem 4rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  &:hover {
    background-color: darken($brand-primary, 6%);
  }
}

SassMeister-output.css

p {
  font-family: "Overpass",Overpass,Helvetica,helvetica,arial,sans-serif;
  font-size: 16px;
}

.cta-primary {
  background-color: #C00;
  color: #fff;
  display: inline-block;
  border: 0;
  font-size: 1.6rem;
  padding: 9px 40px;
  line-height: 1.2;
  padding: .9rem 4rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}
.cta-primary:hover {
  background-color: #ad0000;
}

SassMeister-rendered.html

<p>
  <a href="#" class="cta-primary">Learn more</a>
</p>