Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>foo</p>

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>


<div class="swatch light"></div>
<div class="swatch base"></div>
<div class="swatch dark"></div>
<a href="#">Video Library</a>
<button>Video Library</button>
<button class="button button--primary">Video Library</button>
<button class="button button--primary" disabled>Video Library</button>
<button class="button button--secondary">Video Library</button>
<button class="button button--secondary" disabled>Video Library</button>
<button class="button button--tertiary">Cancel</button>
<button class="button button--tertiary" disabled>Cancel</button>
<button class="button--unstyled">Video Library</button>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

//
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to
// go down multiple levels in the nested map.
//
@function map-fetch($map, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($map, $key);
  @if ($length > 1) {
    $rest: ();
    @for $i from 2 through $length {
      $rest: append($rest, nth($keys, $i))
    }
    @return map-fetch($value, $rest)
  } @else {
    @return $value;
  }
}

@function config($keys...) {
  $helvetica: ("Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif);

  $font-family: (
    base: ("HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", $helvetica),
    ultralight: ("HelveticaNeue-UltraLight", "Helvetica Neue Ultra Light", $helvetica),
    bold: $helvetica,
    light: ("HelveticaNeue-Thin", "Helvetica Neue Thin", $helvetica)
  );

  $font-size: (
    root: 100%, /* 16px */
    xxs: 0.625rem, /* 10px */
    xs: 0.75rem, /* 12px */
    sm: 0.875rem, /* 14px */
    md: 1rem, /* 16px */
    lg: 1.125rem, /* 18px */
    xl: 1.375rem, /* 22px */
    xxl: 2.75rem, /* 44px */
    jumbo: 3.75rem /* 60px */
  );

  $font-weight: (
    bold: 700,
    semibold: 600,
    medium: 500,
    regular: 300,
    light: 200,
    ultralight: 100
  );
  
  $space: (
    xxs: 0.375rem, /* 6px */
    xs: 0.75rem, /* 12px */
    sm: 1.125rem, /* 18px */
    md: 1.5rem, /* 24px */
    lg: 1.875rem, /* 30px */
    xl: 2.25rem, /* 36px */
    xxl: 2.625rem, /* 42px */
    jumbo: 3rem /* 48px */
  );
  
  $config: (
    font-family: $font-family,
    font-size: $font-size,
    font-weight: $font-weight,
    space: $space
  );
  
  @return map-fetch($config, $keys);
}

html {
  font-size: config(font-size, base);
}

body {
  font-family: config(font-family, base);
  font-size: config(font-size, md);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1 {
  font-family: config(font-family, ultralight);
}

 $white: #FFFFFF;
  $black: #000000;

  // grays
  $gray: #999999;
  $darkest-gray: darken($gray, 49.5); /* #1B1B1B */
  $darker-gray: darken($gray, 31.6); /* #484848 */
  $dark-gray: darken($gray, 15); /* #737373 */
  $light-gray: lighten($gray, 27); /* #DEDEDE */
  $lightest-gray: lighten($gray, 34); /* #FOFOFO */

  // cyans
  $cyan: #00A6B1;
  $dark-cyan: darken($cyan, 6.2); /* #008891 */
  $bright-cyan: #34D0CE;

@mixin font-ultralight {
  font-family: config(font-family, ultralight);
  letter-spacing: 0.05em;
  text-rendering: optimizeLegibility; 
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: config(font-weight, regular);
}

@mixin button {
  border: 2px solid transparent;
  
  &:focus {
    border: 2px solid #79BBF8;
    box-shadow: 0px 0px 4px 0px #79BBF8;
    outline: none;
  }
}

@mixin button-unstyled {
  background: none;
  border: none;
  color: $darkest-gray;
  font-family: config(font-family, base);
  padding: 0;
  
  &:focus {
    outline: none;
  }
}

.button {
  @include button;
}

.button--primary {
  @include font-ultralight;
  
  background: $cyan;
  border-radius: 5px;
  color: white;
  padding: config(space, xs);
  text-transform: uppercase;
  
  &:hover,
  &:active {
    background: $dark-cyan;
  }
  
  &[disabled] {
    background: $light-gray;
    color: $gray;
  }
}

.button--secondary {
  @include font-ultralight;
  background: none;
  border: 1px solid $cyan;
  border-radius: 5px;
  color: $cyan;
  padding: config(space, xs);
  text-transform: uppercase;
  
  &:hover,
  &:active {
    background: none;
    color: $dark-cyan;
    border-color: $dark-cyan;
  }
  
  &[disabled] {
    border-color: $light-gray;
    color: $light-gray;
  }
}

.button--tertiary {
  background: none;
  color: $dark-gray;
  font-family: config(font-family, base);
  font-size: config(font-family, sm);
  padding: config(space, xxs);
  text-transform: uppercase;
  
  &:hover, &:active {
    text-decoration: underline;
  }
}

.button--unstyled {
  @include button-unstyled;
}

a {
  color: $cyan;
  text-decoration: none;
  transition: color 0.2s linear;

  &:hover {
    color: $dark-cyan;
  }

  &:active, &:focus {
    color: $dark-cyan;
  }

  &:focus {
    outline: none;
    box-shadow: 0px 0px 4px 0px #79BBF8;
  }
}

SassMeister-output.css

body {
  font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1 {
  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* #1B1B1B */
/* #484848 */
/* #737373 */
/* #DEDEDE */
/* #FOFOFO */
/* #008891 */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: 300;
}

.button {
  border: 2px solid transparent;
}
.button:focus {
  border: 2px solid #79BBF8;
  box-shadow: 0px 0px 4px 0px #79BBF8;
  outline: none;
}

.button--primary {
  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  letter-spacing: 0.05em;
  text-rendering: optimizeLegibility;
  background: #00A6B1;
  border-radius: 5px;
  color: white;
  padding: 0.75rem;
  text-transform: uppercase;
}
.button--primary:hover, .button--primary:active {
  background: #008891;
}
.button--primary[disabled] {
  background: #dedede;
  color: #999999;
}

.button--secondary {
  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  letter-spacing: 0.05em;
  text-rendering: optimizeLegibility;
  background: none;
  border: 1px solid #00A6B1;
  border-radius: 5px;
  color: #00A6B1;
  padding: 0.75rem;
  text-transform: uppercase;
}
.button--secondary:hover, .button--secondary:active {
  background: none;
  color: #008891;
  border-color: #008891;
}
.button--secondary[disabled] {
  border-color: #dedede;
  color: #dedede;
}

.button--tertiary {
  background: none;
  color: #737373;
  font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  padding: 0.375rem;
  text-transform: uppercase;
}
.button--tertiary:hover, .button--tertiary:active {
  text-decoration: underline;
}

.button--unstyled {
  background: none;
  border: none;
  color: #1b1b1b;
  font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  padding: 0;
}
.button--unstyled:focus {
  outline: none;
}

a {
  color: #00A6B1;
  text-decoration: none;
  transition: color 0.2s linear;
}
a:hover {
  color: #008891;
}
a:active, a:focus {
  color: #008891;
}
a:focus {
  outline: none;
  box-shadow: 0px 0px 4px 0px #79BBF8;
}

SassMeister-rendered.html

<p>foo</p>

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>


<div class="swatch light"></div>
<div class="swatch base"></div>
<div class="swatch dark"></div>
<a href="#">Video Library</a>
<button>Video Library</button>
<button class="button button--primary">Video Library</button>
<button class="button button--primary" disabled>Video Library</button>
<button class="button button--secondary">Video Library</button>
<button class="button button--secondary" disabled>Video Library</button>
<button class="button button--tertiary">Cancel</button>
<button class="button button--tertiary" disabled>Cancel</button>
<button class="button--unstyled">Video Library</button>