Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="group">
  <h2>Shapes</h2>
  <p>Modifiers: <span>underline</span>, <span>outline</span>, <span>pill</span></p>
  
  <div class="btn">Button</div>
  <div class="btn btn--underline">Underlined</div>
  <div class="btn btn--outline">Outline</div>
  <div class="btn btn--squared btn--outline">Squared</div>
  <div class="btn btn--pill btn--outline">Pill Button</div>
</div>

<div class="group">
  <h2>Colors</h2>
  <p>Modifiers: <span>brand</span>, <span>light</span>, <span>gray</span>, <span>facebook</span>, <span>twitter</span>, <span>google</span></p>
  
  <div class="btn btn--brand">Brand</div>
  <div class="btn btn--light">Light</div>
  <div class="btn btn--gray">Gray</div>
  <div class="btn btn--asphalt">Asphalt</div>
  <div class="btn btn--green">Green</div>
  <div class="btn btn--facebook">Facebook</div>
  <div class="btn btn--twitter">Twitter</div>
  <div class="btn btn--google">Google+</div>
</div>

<div class="group">
  <h2>Fill <span>It must be used together with a <strong>color</strong> modifier</strong></span></h2>
  <p>Modifiers: <span>fill</span></p>
  
  <div class="btn btn--fill btn--brand">Brand</div>
  <div class="btn btn--fill btn--light">Light</div>
  <div class="btn btn--fill btn--gray">Gray</div>
  <div class="btn btn--fill btn--asphalt">Asphalt</div>
  <div class="btn btn--fill btn--green">Green</div>
  <div class="btn btn--fill btn--facebook">Facebook</div>
  <div class="btn btn--fill btn--twitter">Twitter</div>
  <div class="btn btn--fill btn--google">Google+</div>
</div>

<div class="group">
  <h2>Small</h2>
  <p>Modifiers: <span>small</span></p>
  
  <div class="btn btn--small btn--brand">Brand</div>
  <div class="btn btn--small btn--facebook">Facebook</div>
  <div class="btn btn--small btn--twitter">Twitter</div>
  <div class="btn btn--small btn--google">Google+</div>
  <div class="btn btn--small btn--fill btn--brand">Brand</div>
  <div class="btn btn--small btn--fill btn--facebook">Facebook</div>
  <div class="btn btn--small btn--fill btn--twitter">Twitter</div>
  <div class="btn btn--small btn--fill btn--google">Google+</div>
</div>

<div class="group">
  <h2>Large</h2>
  <p>Modifiers: <span>large</span></p>
  
  <div class="btn btn--large btn--brand">Brand</div>
  <div class="btn btn--large btn--facebook">Facebook</div>
  <div class="btn btn--large btn--twitter">Twitter</div>
  <div class="btn btn--large btn--google">Google+</div>
  <div class="btn btn--large btn--fill btn--brand">Brand</div>
  <div class="btn btn--large btn--fill btn--facebook">Facebook</div>
  <div class="btn btn--large btn--fill btn--twitter">Twitter</div>
  <div class="btn btn--large btn--fill btn--google">Google+</div>
</div>

<div class="group">
  <h2>Block</h2>
  <p>Modifiers: <span>block</span></p>
  
  <div class="btn btn--small btn--fill btn--block btn--brand">Small block</div>
  <div class="btn btn--fill btn--block btn--brand">Normal block</div>
  <div class="btn btn--large btn--fill btn--block btn--brand">Large block</div>
</div>

<div class="group">
  <h2>Active</h2>
  <p>State: <span>is-active</span></p>
  
  <div class="btn btn--light is-active">Light + Active</div>
  <div class="btn btn--twitter is-active">Twitter + Active</div>
  <div class="btn btn--brand btn--pill is-active">Brand + Pill + Active</div>
  <div class="btn btn--facebook btn--pill btn--outline btn--small is-active">Facebook + Pill + Outline + Small + Active</div>
  <div class="btn btn--google btn--large is-active">Google + Pill + Outline + Small + Active</div>
</div>

<div class="group">
  <h2>Disabled</h2>
  <p>State: <span>is-disabled</span></p>
  
  <div class="btn btn--brand btn--outline is-disabled">Brand + Outline + Disabled</div>
  <div class="btn btn--facebook btn--fill is-disabled">Facebook + Fill + Disabled</div>
  <div class="btn btn--brand btn--fill" disabled>Brand + Fill + Disabled (attribute)</div>
</div>

<div class="group">
  <h2>Others</h2>
  <p>Modifiers: <span>uppercase</span></p>
  
  <div class="btn btn--green btn--uppercase">Green + Uppercase</div>
  <div class="btn btn--gray btn--fill btn--uppercase">Gray + Fill + Uppercase</div>
</div>

<div class="group">
  <h2>Multiple modifiers</h2>
  
  <div class="btn btn--brand btn--underline">Brand + Underlined</div>
  <div class="btn btn--facebook btn--fill btn--pill">Facebook + Fill + Pill</div>
  <div class="btn btn--twitter btn--outline">Twitter + Outline</div>
  <div class="btn btn--google btn--outline btn--pill btn--large">Google + Outline + Pill + Large</div>
  <div class="btn btn--black btn--outline btn--small">Black + Outline + Small</div>
  <div class="btn btn--black btn--outline btn--small is-active">Black + Outline + Small + Active</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/**
 * Functions and mixins
*/
@function get-accent-color($color, $accent){
  @if type-of($accent) == 'color' {
    @return $accent;
  }
  @if type-of($accent) == 'number' {
    $mixWith: if(lightness($color) > 40%, black, white);
    @return mix($mixWith, $color, $accent);
  }
  @return $color;
}

@function get-text-color($color, $default){
  @if type-of($default) == 'color' {
    @return $default;
  }
  $luminosity: lightness($color);
  @if $luminosity < 70% {
    @return #ffffff;
  }
  @return rgba(0, 0, 0, 0.5);
}

/**
 * Colors
*/
$colors: (
  brand: (
    color: #ec5d4a,
    accent: #dc5745
  ),
  light: (
    color: #F6F6F1,
    accent: #606B70,
    fill-color: #606B70,
    fill-color-accent: #F6F6F1
  ),
  gray: (
    color: #99A0A0,
    accent: 10%
  ),
  green: (
    color: #26ba9e,
    accent: 10%
  ),
  asphalt: (
    color: #606b70,
    accent: 10%
  ),
  facebook: (
    color: #3b5998,
    accent: 20%
  ),
  twitter: (
    color: #55acee,
    accent: 20%
  ),
  google: (
    color: #dc4e41,
    accent: 10%
  ),
  white: (
    color: #ffffff,
    accent: 5%
  ),
  black: (
    color: #000000,
    accent: 30%
  ),
);

$mqs: (
  sm: only screen and (max-width: 40em),
  md\+: only screen and (min-width: 40.063em),
  md: only screen and (min-width: 40.063em) and (max-width: 64em),
  lg\+: only screen and (min-width: 64.063em),
  lg: only screen and (min-width: 64.063em) and (max-width: 90em),
  xl\+: only screen and (min-width: 90.063em),
  xl: only screen and (min-width: 90.063em) and (max-width: 120em)
);

/**
 * Button variations
 */
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  color: inherit;
  vertical-align: middle;
  border-radius: 2px;
  transition: color 0.2s, background-color 0.2s;
}

.btn--underline {
  padding: 0.125rem 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0px;
}

.btn--fill, .btn--pill, .btn--outline, .btn--large {
  border-bottom: 0;
}

.btn.is-active,
.btn--fill,
.btn--pill,
.btn--outline {
  padding: 0.5rem 0.75rem;
}

.btn--block {
  display: block;
  margin-bottom: 1rem;
}

.btn--large {
  padding: 0.75rem 1.25rem;
  font-size: 1.25rem;
}

.btn--small, .btn--small.is-active {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
}

.btn--outline {
  box-shadow: inset 0px 0px 0 2px currentColor;
}

.btn--squared {
  border-radius: 0px;
}

.btn--pill {
  border-radius: 100em;
}

.btn--uppercase {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn.is-active {
  box-shadow: 0px 0px 5px currentColor;
}

.btn.is-disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

@each $key, $obj in $colors {
  $color: map_get($obj, "color");
  $accent: get-accent-color($color, map_get($obj, "accent"));
  $fill-color: get-text-color($color, map_get($obj, "fill-color"));
  $fill-color-accent: get-text-color($accent, map_get($obj, "fill-color-accent"));
  
  .btn--#{$key} {
    color: $color;
    
    &:not([disabled]):not(.is-disabled):not(.is-active):hover {
      color: $accent;
    }
    
    &.btn--fill {
      color: $fill-color;
      background-color: $color;
      
      &:not([disabled]):not(.is-disabled):not(.is-active):hover {
        color: $fill-color-accent;
        background-color: $accent;
      }
    }
    
    &.is-active, &.is-active:hover {
      color: $fill-color-accent;
      box-shadow: 0px 0px 4px transparentize($accent, 0.7);
      background-color: $accent;
    }
  }
}

/**
 * Default styles
 */
*, *:before, *:after {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
}
html {
  font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #222;
  background-color: #fdfdfd;
}
.group {
  width: 100%;
  padding: 2rem;
  &:not(:first-child) {
    border-top: 1px solid #eee;
  }
  h2 {
    margin: 0 0 0.5rem 0;
    span {
      font-weight: 100;
      font-size: 1rem;
      color: #ec5d4a;
      &:before {
        content: "\2015";
        margin-right: 5px;
        display: inline-block;
        transform: rotate(-60deg);
      }
    }
  }
  p {
    color: #999;
    font-size: 0.88rem;
    margin: 0;
    &:last-of-type {
      margin: 0 0 1.5rem 0;
    }
    span {
      border-bottom: 1px dotted currentColor;
      &:hover {
        color: #666;
      }
    }
  }
}

SassMeister-output.css

/**
 * Functions and mixins
*/
/**
 * Colors
*/
/**
 * Button variations
 */
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  color: inherit;
  vertical-align: middle;
  border-radius: 2px;
  transition: color 0.2s, background-color 0.2s;
}

.btn--underline {
  padding: 0.125rem 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0px;
}

.btn--fill, .btn--pill, .btn--outline, .btn--large {
  border-bottom: 0;
}

.btn.is-active,
.btn--fill,
.btn--pill,
.btn--outline {
  padding: 0.5rem 0.75rem;
}

.btn--block {
  display: block;
  margin-bottom: 1rem;
}

.btn--large {
  padding: 0.75rem 1.25rem;
  font-size: 1.25rem;
}

.btn--small, .btn--small.is-active {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
}

.btn--outline {
  box-shadow: inset 0px 0px 0 2px currentColor;
}

.btn--squared {
  border-radius: 0px;
}

.btn--pill {
  border-radius: 100em;
}

.btn--uppercase {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn.is-active {
  box-shadow: 0px 0px 5px currentColor;
}

.btn.is-disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn--brand {
  color: #ec5d4a;
}

.btn--brand:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #dc5745;
}

.btn--brand.btn--fill {
  color: #ffffff;
  background-color: #ec5d4a;
}

.btn--brand.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #dc5745;
}

.btn--brand.is-active, .btn--brand.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(220, 87, 69, 0.3);
  background-color: #dc5745;
}

.btn--light {
  color: #F6F6F1;
}

.btn--light:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #606B70;
}

.btn--light.btn--fill {
  color: #606B70;
  background-color: #F6F6F1;
}

.btn--light.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #F6F6F1;
  background-color: #606B70;
}

.btn--light.is-active, .btn--light.is-active:hover {
  color: #F6F6F1;
  box-shadow: 0px 0px 4px rgba(96, 107, 112, 0.3);
  background-color: #606B70;
}

.btn--gray {
  color: #99A0A0;
}

.btn--gray:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #8a9090;
}

.btn--gray.btn--fill {
  color: #ffffff;
  background-color: #99A0A0;
}

.btn--gray.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #8a9090;
}

.btn--gray.is-active, .btn--gray.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(138, 144, 144, 0.3);
  background-color: #8a9090;
}

.btn--green {
  color: #26ba9e;
}

.btn--green:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #22a78e;
}

.btn--green.btn--fill {
  color: #ffffff;
  background-color: #26ba9e;
}

.btn--green.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #22a78e;
}

.btn--green.is-active, .btn--green.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(34, 167, 142, 0.3);
  background-color: #22a78e;
}

.btn--asphalt {
  color: #606b70;
}

.btn--asphalt:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #566065;
}

.btn--asphalt.btn--fill {
  color: #ffffff;
  background-color: #606b70;
}

.btn--asphalt.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #566065;
}

.btn--asphalt.is-active, .btn--asphalt.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(86, 96, 101, 0.3);
  background-color: #566065;
}

.btn--facebook {
  color: #3b5998;
}

.btn--facebook:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #2f477a;
}

.btn--facebook.btn--fill {
  color: #ffffff;
  background-color: #3b5998;
}

.btn--facebook.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #2f477a;
}

.btn--facebook.is-active, .btn--facebook.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(47, 71, 122, 0.3);
  background-color: #2f477a;
}

.btn--twitter {
  color: #55acee;
}

.btn--twitter:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #448abe;
}

.btn--twitter.btn--fill {
  color: #ffffff;
  background-color: #55acee;
}

.btn--twitter.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #448abe;
}

.btn--twitter.is-active, .btn--twitter.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(68, 138, 190, 0.3);
  background-color: #448abe;
}

.btn--google {
  color: #dc4e41;
}

.btn--google:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #c6463b;
}

.btn--google.btn--fill {
  color: #ffffff;
  background-color: #dc4e41;
}

.btn--google.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #c6463b;
}

.btn--google.is-active, .btn--google.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(198, 70, 59, 0.3);
  background-color: #c6463b;
}

.btn--white {
  color: #ffffff;
}

.btn--white:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #f2f2f2;
}

.btn--white.btn--fill {
  color: rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
}

.btn--white.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: rgba(0, 0, 0, 0.5);
  background-color: #f2f2f2;
}

.btn--white.is-active, .btn--white.is-active:hover {
  color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 4px rgba(242, 242, 242, 0.3);
  background-color: #f2f2f2;
}

.btn--black {
  color: #000000;
}

.btn--black:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #4d4d4d;
}

.btn--black.btn--fill {
  color: #ffffff;
  background-color: #000000;
}

.btn--black.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #4d4d4d;
}

.btn--black.is-active, .btn--black.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(77, 77, 77, 0.3);
  background-color: #4d4d4d;
}

/**
 * Default styles
 */
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

html {
  font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #222;
  background-color: #fdfdfd;
}

.group {
  width: 100%;
  padding: 2rem;
}

.group:not(:first-child) {
  border-top: 1px solid #eee;
}

.group h2 {
  margin: 0 0 0.5rem 0;
}

.group h2 span {
  font-weight: 100;
  font-size: 1rem;
  color: #ec5d4a;
}

.group h2 span:before {
  content: "\2015";
  margin-right: 5px;
  display: inline-block;
  transform: rotate(-60deg);
}

.group p {
  color: #999;
  font-size: 0.88rem;
  margin: 0;
}

.group p:last-of-type {
  margin: 0 0 1.5rem 0;
}

.group p span {
  border-bottom: 1px dotted currentColor;
}

.group p span:hover {
  color: #666;
}

SassMeister-rendered.html

<div class="group">
  <h2>Shapes</h2>
  <p>Modifiers: <span>underline</span>, <span>outline</span>, <span>pill</span></p>
  
  <div class="btn">Button</div>
  <div class="btn btn--underline">Underlined</div>
  <div class="btn btn--outline">Outline</div>
  <div class="btn btn--squared btn--outline">Squared</div>
  <div class="btn btn--pill btn--outline">Pill Button</div>
</div>

<div class="group">
  <h2>Colors</h2>
  <p>Modifiers: <span>brand</span>, <span>light</span>, <span>gray</span>, <span>facebook</span>, <span>twitter</span>, <span>google</span></p>
  
  <div class="btn btn--brand">Brand</div>
  <div class="btn btn--light">Light</div>
  <div class="btn btn--gray">Gray</div>
  <div class="btn btn--asphalt">Asphalt</div>
  <div class="btn btn--green">Green</div>
  <div class="btn btn--facebook">Facebook</div>
  <div class="btn btn--twitter">Twitter</div>
  <div class="btn btn--google">Google+</div>
</div>

<div class="group">
  <h2>Fill <span>It must be used together with a <strong>color</strong> modifier</strong></span></h2>
  <p>Modifiers: <span>fill</span></p>
  
  <div class="btn btn--fill btn--brand">Brand</div>
  <div class="btn btn--fill btn--light">Light</div>
  <div class="btn btn--fill btn--gray">Gray</div>
  <div class="btn btn--fill btn--asphalt">Asphalt</div>
  <div class="btn btn--fill btn--green">Green</div>
  <div class="btn btn--fill btn--facebook">Facebook</div>
  <div class="btn btn--fill btn--twitter">Twitter</div>
  <div class="btn btn--fill btn--google">Google+</div>
</div>

<div class="group">
  <h2>Small</h2>
  <p>Modifiers: <span>small</span></p>
  
  <div class="btn btn--small btn--brand">Brand</div>
  <div class="btn btn--small btn--facebook">Facebook</div>
  <div class="btn btn--small btn--twitter">Twitter</div>
  <div class="btn btn--small btn--google">Google+</div>
  <div class="btn btn--small btn--fill btn--brand">Brand</div>
  <div class="btn btn--small btn--fill btn--facebook">Facebook</div>
  <div class="btn btn--small btn--fill btn--twitter">Twitter</div>
  <div class="btn btn--small btn--fill btn--google">Google+</div>
</div>

<div class="group">
  <h2>Large</h2>
  <p>Modifiers: <span>large</span></p>
  
  <div class="btn btn--large btn--brand">Brand</div>
  <div class="btn btn--large btn--facebook">Facebook</div>
  <div class="btn btn--large btn--twitter">Twitter</div>
  <div class="btn btn--large btn--google">Google+</div>
  <div class="btn btn--large btn--fill btn--brand">Brand</div>
  <div class="btn btn--large btn--fill btn--facebook">Facebook</div>
  <div class="btn btn--large btn--fill btn--twitter">Twitter</div>
  <div class="btn btn--large btn--fill btn--google">Google+</div>
</div>

<div class="group">
  <h2>Block</h2>
  <p>Modifiers: <span>block</span></p>
  
  <div class="btn btn--small btn--fill btn--block btn--brand">Small block</div>
  <div class="btn btn--fill btn--block btn--brand">Normal block</div>
  <div class="btn btn--large btn--fill btn--block btn--brand">Large block</div>
</div>

<div class="group">
  <h2>Active</h2>
  <p>State: <span>is-active</span></p>
  
  <div class="btn btn--light is-active">Light + Active</div>
  <div class="btn btn--twitter is-active">Twitter + Active</div>
  <div class="btn btn--brand btn--pill is-active">Brand + Pill + Active</div>
  <div class="btn btn--facebook btn--pill btn--outline btn--small is-active">Facebook + Pill + Outline + Small + Active</div>
  <div class="btn btn--google btn--large is-active">Google + Pill + Outline + Small + Active</div>
</div>

<div class="group">
  <h2>Disabled</h2>
  <p>State: <span>is-disabled</span></p>
  
  <div class="btn btn--brand btn--outline is-disabled">Brand + Outline + Disabled</div>
  <div class="btn btn--facebook btn--fill is-disabled">Facebook + Fill + Disabled</div>
  <div class="btn btn--brand btn--fill" disabled>Brand + Fill + Disabled (attribute)</div>
</div>

<div class="group">
  <h2>Others</h2>
  <p>Modifiers: <span>uppercase</span></p>
  
  <div class="btn btn--green btn--uppercase">Green + Uppercase</div>
  <div class="btn btn--gray btn--fill btn--uppercase">Gray + Fill + Uppercase</div>
</div>

<div class="group">
  <h2>Multiple modifiers</h2>
  
  <div class="btn btn--brand btn--underline">Brand + Underlined</div>
  <div class="btn btn--facebook btn--fill btn--pill">Facebook + Fill + Pill</div>
  <div class="btn btn--twitter btn--outline">Twitter + Outline</div>
  <div class="btn btn--google btn--outline btn--pill btn--large">Google + Outline + Pill + Large</div>
  <div class="btn btn--black btn--outline btn--small">Black + Outline + Small</div>
  <div class="btn btn--black btn--outline btn--small is-active">Black + Outline + Small + Active</div>
</div>