Generated by SassMeister.com.

SassMeister-input.scss

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

// Colors

// Base Colors
$c-black: #000000;
$c-white: #ffffff;

// Brand Colors
$c-green-dark: #1a5326;
$c-green: #9cb41d;
$c-blue-dark: #222b5a;
$c-blue: #28aed0;
$c-orange: #f19405;

// Web Colors
$c-grey: #f0f0f0;

// Color Scheme Brand Map
// $scheme: $color
$color-scheme--brand: (
   cs-a: $c-green-dark,
   cs-b: $c-green,
   cs-c: $c-blue-dark,
   cs-d: $c-blue,
   cs-e: $c-orange  
);

// Color Scheme Web Map
// $scheme: $color
$color-scheme--web: (
   cs-f: $c-grey  
);

$page-color: $c-grey;
$opacity: 0.8;
$tint: 20%;

// Web Fonts
// $family, $face, $style, $weight
$webfonts: 
('PT Sans W01', 'din-regular',        'normal', '400' ),
('PT Sans W01', 'din-regular-italic', 'italic', '400' ),
('PT Sans W01', 'din-bold',           'normal', '700' ),
('PT Sans W01', 'din-bold-italic',    'italic', '700' );

// Fonts Stacks
$font-stack-default: arial, sans-serif;
$font-stack-headings: "PT Sans W01", sans-serif;

// Font Types
$headers:    $font-stack-headings;
$subheaders: $font-stack-headings;
$bodycopy:   $font-stack-default;
$navigation: $font-stack-headings;
$quote:      $font-stack-headings;
$buttons:    $font-stack-headings;
$data:       $font-stack-default;

$font-scale: (
  headers: (
    1: ( font-size: 50, line-height: 60 ),
    medium: ( font-size: 25, line-height: 30 ),
    small: ( font-size: 20, line-height: 24 ),
    4: ( font-size: 15, line-height: 18 )
  ),
  subheaders: (
    1: ( font-size: 25, line-height: 30 ),
    2: ( font-size: 20, line-height: 24 ),
    3: ( font-size: 15, line-height: 18 ),
    4: ( font-size: 14, line-height: 17 )
  ),
  bodycopy: (
    1: ( font-size: 13, line-height: 16 )
  ),
  bodyHeadings: (
    1: ( font-size: 14, line-height: 18 ),
    small: ( font-size: 14, line-height: 18 )
  ),
  buttons: (
    1: ( font-size: 15, line-height: 18 ),
    oneoff: (font-size: 11, line-height: 18)
  ),
  data: (
    1: ( font-size: 12, line-height: 14 )
  )

);

@mixin font-scale($fonts: $font-scale) {
  @each $font-family, $set in $fonts {
    @each $modifier, $properties in $set {
      .#{$font-family}--#{$modifier} { 
        @include get-scale($font-family, $modifier);
      }
    }
  }
}

@mixin get-scale($font-family, $modifier, $fonts: $font-scale) {
  $set: map-get($font-scale, $font-family);
  $properties: map-get($set, $modifier);
  @each $key, $value in $properties {
    #{$key}: $value;
  }
}

@include font-scale();

.sg__typeface,
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {   
   font-family: $font-stack-headings; 
}

$headings: (


);
$paragraphs: ();//?
/*$links: (
    ('normal', )
    ('contrast',)
    ('reverse',)
);*/


















$all-colors: map_merge($color-scheme--brand, $color-scheme--web);
$brand-colors: map-keys($color-scheme--brand);
$web-colors: map-keys($color-scheme--web);

$all-color-profiles: map-keys($all-colors); 
$brand-color-profiles: map-keys($color-scheme--brand); 
$web-color-profiles: map-keys($color-scheme--web); 

.sg__color-palette {
   > div {
      display: none;
      width: 50px;
      height: 50px;
      &:before,
      &:after {
         display: none !important;
      }
   }
   
}
.sg__color-scheme {
   div { 
      display: none;
      position: relative;
      width: 100px; 
      height: 100px;          
      border-bottom: 30px solid white;
      &:before,
      &:after {           
         display: block;
         position: absolute;
         width: 100px;
         text-align: center;
         text-transform: uppercase;            
         top: 50%;
         margin-top: -8px;
      }
      &:after {
         top: calc(100% + 15px);
      }
   }
}

@for $i from 1 through length($all-color-profiles) {
   
   $class: 'color-scheme--web'; 
   @if (map-has-key($color-scheme--brand, nth($all-color-profiles, $i))) { 
      $class: 'color-scheme--brand';
   } 
   
   .sg__color-palette, 
   .#{$class} {     
      div:nth-child(#{$i}) {
         display: inline-block;
         background-color: map-get($all-colors, nth($all-color-profiles, $i));
         border-bottom-color: mix($c-white, map-get($all-colors, nth($all-color-profiles, $i)), $tint );         
         &:before,
         &:after {
            color: $c-white;
            @if (lightness(map-get($all-colors, nth($all-color-profiles, $i))) > 50) {
               color: $c-black;
            }
         }
         &:before {            
            content: "#{map-get($all-colors, nth($all-color-profiles, $i))}";            
         }         
         &:after {            
            content: "#{nth($all-color-profiles, $i)}";            
         }         
      }      
   }   
}

.sg__tint:after { content: " (with #{$tint} tint)"}


@each $family, $face, $style, $weight in $webfonts {
 
    @font-face {
      
    	font-family: #{$family};
    	src:         url('assets/css/fonts/#{$face}.eot');
    	src:         url('assets/css/fonts/#{$face}.eot?#iefix') format('embedded-opentype'),
    		          url('assets/css/fonts/#{$face}.woff') format('woff'),
    		          url('assets/css/fonts/#{$face}.ttf') format('truetype');
      font-weight: #{$weight};
    	font-style:  #{$style};
    	// Usage: @extend %#{$face}; 
 
    }
 
    // Placeholder Class (see usage)
    %wf-#{$face} {
 
        font-family: #{$family};
        font-weight: #{$weight};
        font-style:  #{$style};
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizelegibility;
 
    }
 
}
// StyleGuide
body { background-color: $c-grey; }
h1 { text-align: center; }

.styleguide { 
   margin: 2em; 
   background-color: white; 
   padding: 2em; 
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
}
.l-box {
   

   
}

SassMeister-output.css

.headers--1 {
  font-size: 50;
  line-height: 60;
}

.headers--medium {
  font-size: 25;
  line-height: 30;
}

.headers--small {
  font-size: 20;
  line-height: 24;
}

.headers--4 {
  font-size: 15;
  line-height: 18;
}

.subheaders--1 {
  font-size: 25;
  line-height: 30;
}

.subheaders--2 {
  font-size: 20;
  line-height: 24;
}

.subheaders--3 {
  font-size: 15;
  line-height: 18;
}

.subheaders--4 {
  font-size: 14;
  line-height: 17;
}

.bodycopy--1 {
  font-size: 13;
  line-height: 16;
}

.bodyHeadings--1 {
  font-size: 14;
  line-height: 18;
}

.bodyHeadings--small {
  font-size: 14;
  line-height: 18;
}

.buttons--1 {
  font-size: 15;
  line-height: 18;
}

.buttons--oneoff {
  font-size: 11;
  line-height: 18;
}

.data--1 {
  font-size: 12;
  line-height: 14;
}

.sg__typeface,
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "PT Sans W01", sans-serif;
}

/*$links: (
    ('normal', )
    ('contrast',)
    ('reverse',)
);*/
.sg__color-palette > div {
  display: none;
  width: 50px;
  height: 50px;
}

.sg__color-palette > div:before,
.sg__color-palette > div:after {
  display: none !important;
}

.sg__color-scheme div {
  display: none;
  position: relative;
  width: 100px;
  height: 100px;
  border-bottom: 30px solid white;
}

.sg__color-scheme div:before,
.sg__color-scheme div:after {
  display: block;
  position: absolute;
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  margin-top: -8px;
}

.sg__color-scheme div:after {
  top: calc(100% + 15px);
}

.sg__color-palette div:nth-child(1),
.color-scheme--brand div:nth-child(1) {
  display: inline-block;
  background-color: #1a5326;
  border-bottom-color: #487551;
}

.sg__color-palette div:nth-child(1):before,
.sg__color-palette div:nth-child(1):after,
.color-scheme--brand div:nth-child(1):before,
.color-scheme--brand div:nth-child(1):after {
  color: #ffffff;
}

.sg__color-palette div:nth-child(1):before,
.color-scheme--brand div:nth-child(1):before {
  content: "#1a5326";
}

.sg__color-palette div:nth-child(1):after,
.color-scheme--brand div:nth-child(1):after {
  content: "cs-a";
}

.sg__color-palette div:nth-child(2),
.color-scheme--brand div:nth-child(2) {
  display: inline-block;
  background-color: #9cb41d;
  border-bottom-color: #b0c34a;
}

.sg__color-palette div:nth-child(2):before,
.sg__color-palette div:nth-child(2):after,
.color-scheme--brand div:nth-child(2):before,
.color-scheme--brand div:nth-child(2):after {
  color: #ffffff;
}

.sg__color-palette div:nth-child(2):before,
.color-scheme--brand div:nth-child(2):before {
  content: "#9cb41d";
}

.sg__color-palette div:nth-child(2):after,
.color-scheme--brand div:nth-child(2):after {
  content: "cs-b";
}

.sg__color-palette div:nth-child(3),
.color-scheme--brand div:nth-child(3) {
  display: inline-block;
  background-color: #222b5a;
  border-bottom-color: #4e557b;
}

.sg__color-palette div:nth-child(3):before,
.sg__color-palette div:nth-child(3):after,
.color-scheme--brand div:nth-child(3):before,
.color-scheme--brand div:nth-child(3):after {
  color: #ffffff;
}

.sg__color-palette div:nth-child(3):before,
.color-scheme--brand div:nth-child(3):before {
  content: "#222b5a";
}

.sg__color-palette div:nth-child(3):after,
.color-scheme--brand div:nth-child(3):after {
  content: "cs-c";
}

.sg__color-palette div:nth-child(4),
.color-scheme--brand div:nth-child(4) {
  display: inline-block;
  background-color: #28aed0;
  border-bottom-color: #53bed9;
}

.sg__color-palette div:nth-child(4):before,
.sg__color-palette div:nth-child(4):after,
.color-scheme--brand div:nth-child(4):before,
.color-scheme--brand div:nth-child(4):after {
  color: #ffffff;
}

.sg__color-palette div:nth-child(4):before,
.color-scheme--brand div:nth-child(4):before {
  content: "#28aed0";
}

.sg__color-palette div:nth-child(4):after,
.color-scheme--brand div:nth-child(4):after {
  content: "cs-d";
}

.sg__color-palette div:nth-child(5),
.color-scheme--brand div:nth-child(5) {
  display: inline-block;
  background-color: #f19405;
  border-bottom-color: #f4a937;
}

.sg__color-palette div:nth-child(5):before,
.sg__color-palette div:nth-child(5):after,
.color-scheme--brand div:nth-child(5):before,
.color-scheme--brand div:nth-child(5):after {
  color: #ffffff;
}

.sg__color-palette div:nth-child(5):before,
.color-scheme--brand div:nth-child(5):before {
  content: "#f19405";
}

.sg__color-palette div:nth-child(5):after,
.color-scheme--brand div:nth-child(5):after {
  content: "cs-e";
}

.sg__color-palette div:nth-child(6),
.color-scheme--web div:nth-child(6) {
  display: inline-block;
  background-color: #f0f0f0;
  border-bottom-color: #f3f3f3;
}

.sg__color-palette div:nth-child(6):before,
.sg__color-palette div:nth-child(6):after,
.color-scheme--web div:nth-child(6):before,
.color-scheme--web div:nth-child(6):after {
  color: #ffffff;
  color: #000000;
}

.sg__color-palette div:nth-child(6):before,
.color-scheme--web div:nth-child(6):before {
  content: "#f0f0f0";
}

.sg__color-palette div:nth-child(6):after,
.color-scheme--web div:nth-child(6):after {
  content: "cs-f";
}

.sg__tint:after {
  content: " (with 20% tint)";
}

@font-face {
  font-family: PT Sans W01;
  src: url("assets/css/fonts/din-regular.eot");
  src: url("assets/css/fonts/din-regular.eot?#iefix") format("embedded-opentype"), url("assets/css/fonts/din-regular.woff") format("woff"), url("assets/css/fonts/din-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: PT Sans W01;
  src: url("assets/css/fonts/din-regular-italic.eot");
  src: url("assets/css/fonts/din-regular-italic.eot?#iefix") format("embedded-opentype"), url("assets/css/fonts/din-regular-italic.woff") format("woff"), url("assets/css/fonts/din-regular-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: PT Sans W01;
  src: url("assets/css/fonts/din-bold.eot");
  src: url("assets/css/fonts/din-bold.eot?#iefix") format("embedded-opentype"), url("assets/css/fonts/din-bold.woff") format("woff"), url("assets/css/fonts/din-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: PT Sans W01;
  src: url("assets/css/fonts/din-bold-italic.eot");
  src: url("assets/css/fonts/din-bold-italic.eot?#iefix") format("embedded-opentype"), url("assets/css/fonts/din-bold-italic.woff") format("woff"), url("assets/css/fonts/din-bold-italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

body {
  background-color: #f0f0f0;
}

h1 {
  text-align: center;
}

.styleguide {
  margin: 2em;
  background-color: white;
  padding: 2em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}