const express = require('express');
const app = express();
const livereload = require('livereload');
const lrServer = livereload.createServer();
app.use(express.static('./'));
app.listen(3000, () => {
    console.log('Dev listening on http://127.0.0.1:3000/ ')
});
lrServer.watch(process.cwd());
html,body{margin:0;font-size:16px}header{padding-top:1.25rem;padding-bottom:1.25rem}footer{padding-top:1.25rem;padding-bottom:1.25rem}section{padding-top:2.5rem;padding-bottom:2.5rem}header{background-color:#8a8a8a;padding-top:1rem;padding-right:2rem;padding-left:2rem;border-bottom:1px solid #0a0a0a}footer{background-color:#8a8a8a;padding-bottom:1rem;padding-right:2rem;padding-left:2rem;border-top:1px solid #0a0a0a}section{padding-right:4rem;padding-left:4rem}section:first-of-type{padding-top:1rem}section:last-of-type{padding-bottom:1rem}section.sxn-med-gray,section:nth-of-type(even){background-color:#cacaca}section.sxn-light-gray,section:nth-of-type(odd){background-color:#e6e6e6}dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,blockquote,th,td{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin:0;padding:0}p{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-bottom:1rem;font-size:inherit;line-height:1.6;text-rendering:optimizeLegibility}em,i{font-style:italic;line-height:inherit}strong,dl>dt,b{font-weight:bold;line-height:inherit}small{font-size:80%;line-height:inherit}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-style:normal;font-weight:normal;color:inherit;text-rendering:optimizeLegibility;margin-bottom:.5rem}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{line-height:0;color:#cacaca}dl>dt{padding-top:.5rem}dl>dt:before{display:inline-block;content:'>';padding-right:.5rem}dl>dd{padding-top:.5rem;padding-bottom:.5rem}code{color:#fefefe;display:inline-block;border:1px solid #0a0a0a;background-color:#8a8a8a;padding:3px}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:1rem}.button{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;border:1px solid #ff9b83;color:#ff9b83}.button,.button:hover,.button:focus{background-color:transparent}.button.disabled,.button.disabled:hover,.button.disabled:focus,.button[disabled],.button[disabled]:hover,.button[disabled]:focus{background-color:transparent}.button:hover,.button:focus{border-color:#c12500;color:#c12500}.button:hover.disabled,.button:hover[disabled],.button:focus.disabled,.button:focus[disabled]{border:1px solid #ff9b83;color:#ff9b83}.button.primary{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:#1779ba;color:#fefefe}.button.primary:hover,.button.primary:focus{background-color:#4eabe9;color:#fefefe}.button.hollow.primary{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;border:1px solid #1779ba;color:#1779ba}.button.hollow.primary,.button.hollow.primary:hover,.button.hollow.primary:focus{background-color:transparent}.button.hollow.primary.disabled,.button.hollow.primary.disabled:hover,.button.hollow.primary.disabled:focus,.button.hollow.primary[disabled],.button.hollow.primary[disabled]:hover,.button.hollow.primary[disabled]:focus{background-color:transparent}.button.hollow.primary:hover,.button.hollow.primary:focus{border-color:#0c3d5d;color:#0c3d5d}.button.hollow.primary:hover.disabled,.button.hollow.primary:hover[disabled],.button.hollow.primary:focus.disabled,.button.hollow.primary:focus[disabled]{border:1px solid #1779ba;color:#1779ba}.button.shaded.primary{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:rgba(23,121,186,0.2);color:#1779ba}.button.shaded.primary:hover,.button.shaded.primary:focus{background-color:rgba(23,121,186,0.6);color:#1779ba}.button.secondary{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:#767676;color:#fefefe}.button.secondary:hover,.button.secondary:focus{background-color:#a9a9a9;color:#fefefe}.button.hollow.secondary{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;border:1px solid #767676;color:#767676}.button.hollow.secondary,.button.hollow.secondary:hover,.button.hollow.secondary:focus{background-color:transparent}.button.hollow.secondary.disabled,.button.hollow.secondary.disabled:hover,.button.hollow.secondary.disabled:focus,.button.hollow.secondary[disabled],.button.hollow.secondary[disabled]:hover,.button.hollow.secondary[disabled]:focus{background-color:transparent}.button.hollow.secondary:hover,.button.hollow.secondary:focus{border-color:#3b3b3b;color:#3b3b3b}.button.hollow.secondary:hover.disabled,.button.hollow.secondary:hover[disabled],.button.hollow.secondary:focus.disabled,.button.hollow.secondary:focus[disabled]{border:1px solid #767676;color:#767676}.button.shaded.secondary{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:rgba(118,118,118,0.2);color:#767676}.button.shaded.secondary:hover,.button.shaded.secondary:focus{background-color:rgba(118,118,118,0.6);color:#767676}.button.success{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:#3adb76;color:#fefefe}.button.success:hover,.button.success:focus{background-color:#90ebb2;color:#fefefe}.button.hollow.success{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;border:1px solid #3adb76;color:#3adb76}.button.hollow.success,.button.hollow.success:hover,.button.hollow.success:focus{background-color:transparent}.button.hollow.success.disabled,.button.hollow.success.disabled:hover,.button.hollow.success.disabled:focus,.button.hollow.success[disabled],.button.hollow.success[disabled]:hover,.button.hollow.success[disabled]:focus{background-color:transparent}.button.hollow.success:hover,.button.hollow.success:focus{border-color:#157539;color:#157539}.button.hollow.success:hover.disabled,.button.hollow.success:hover[disabled],.button.hollow.success:focus.disabled,.button.hollow.success:focus[disabled]{border:1px solid #3adb76;color:#3adb76}.button.shaded.success{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:rgba(58,219,118,0.2);color:#3adb76}.button.shaded.success:hover,.button.shaded.success:focus{background-color:rgba(58,219,118,0.6);color:#3adb76}.button.warning{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:#ffae00;color:#fefefe}.button.warning:hover,.button.warning:focus{background-color:#ffce66;color:#fefefe}.button.hollow.warning{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;border:1px solid #ffae00;color:#ffae00}.button.hollow.warning,.button.hollow.warning:hover,.button.hollow.warning:focus{background-color:transparent}.button.hollow.warning.disabled,.button.hollow.warning.disabled:hover,.button.hollow.warning.disabled:focus,.button.hollow.warning[disabled],.button.hollow.warning[disabled]:hover,.button.hollow.warning[disabled]:focus{background-color:transparent}.button.hollow.warning:hover,.button.hollow.warning:focus{border-color:#805700;color:#805700}.button.hollow.warning:hover.disabled,.button.hollow.warning:hover[disabled],.button.hollow.warning:focus.disabled,.button.hollow.warning:focus[disabled]{border:1px solid #ffae00;color:#ffae00}.button.shaded.warning{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:rgba(255,174,0,0.2);color:#ffae00}.button.shaded.warning:hover,.button.shaded.warning:focus{background-color:rgba(255,174,0,0.6);color:#ffae00}.button.alert{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:#cc4b36;color:#fefefe}.button.alert:hover,.button.alert:focus{background-color:#e19487;color:#fefefe}.button.hollow.alert{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;border:1px solid #cc4b36;color:#cc4b36}.button.hollow.alert,.button.hollow.alert:hover,.button.hollow.alert:focus{background-color:transparent}.button.hollow.alert.disabled,.button.hollow.alert.disabled:hover,.button.hollow.alert.disabled:focus,.button.hollow.alert[disabled],.button.hollow.alert[disabled]:hover,.button.hollow.alert[disabled]:focus{background-color:transparent}.button.hollow.alert:hover,.button.hollow.alert:focus{border-color:#67251a;color:#67251a}.button.hollow.alert:hover.disabled,.button.hollow.alert:hover[disabled],.button.hollow.alert:focus.disabled,.button.hollow.alert:focus[disabled]{border:1px solid #cc4b36;color:#cc4b36}.button.shaded.alert{display:inline-block;vertical-align:middle;margin:0 0 1rem 0;font-family:inherit;padding:0.85em 1em;-webkit-appearance:none;border:1px solid transparent;border-radius:0;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out;font-size:.943rem;line-height:1;text-align:center;cursor:pointer;background-color:rgba(204,75,54,0.2);color:#cc4b36}.button.shaded.alert:hover,.button.shaded.alert:focus{background-color:rgba(204,75,54,0.6);color:#cc4b36}

/*# sourceMappingURL=style.css.map */
{"version":3,"sources":["theme/_theme.scss","sections/_base.scss","theme/_functions.scss","theme/_variables.scss","sections/_themed-sxns.scss","typography/_base.scss","typography/_typography.scss","buttons/_base.scss","buttons/_buttons.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["/*\nThe three global theme files:\n- functions: These are utilities that *create* values and they don't require variables; they load first\n- variables: These are set theme values. They're used by mixins, so they load before mixins;\n- mixins: These are the take-it-or-leave-it @include blocks. They load after the other two because they need the other two.\n */\n@import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n\n//-- global style resets\n\nhtml, body {\n  margin: 0;\n  // set our font size here to the same value used in the calculateRem function so rems will... work.\n  font-size: 16px;\n}","\nsection, header, footer {\n}\n\n//-- set default vertcal pads from the list in our theme file\n@each $type, $padding in $section-paddings {\n  #{$type} {\n    padding-top: $padding;\n    padding-bottom: $padding;\n  }\n}\n\n//-- paint the sections\nheader {\n  background-color: $header-background;\n  padding-top: $global-padding;\n  padding-right:$global-padding*2;\n  padding-left:$global-padding*2;\n  border-bottom: map_get($border-sizes, light) solid $black;\n}\n\nfooter {\n  background-color: $header-background;\n  padding-bottom: $global-padding;\n  padding-right:$global-padding*2;\n  padding-left:$global-padding*2;\n  border-top: map_get($border-sizes, light) solid $black;\n}\n\nsection {\n  padding-right:$global-padding*4;\n  padding-left:$global-padding*4;\n\n  &:first-of-type {\n    padding-top: $global-padding;\n  }\n  &:last-of-type {\n    padding-bottom: $global-padding;\n  }\n}\n","/*\nConverts px size to rems.\n */\n@function calculateRem($size) {\n  $remSize: $size / 16;\n  @return #{$remSize}rem;\n}","//-- geometry\n$global-margin: 1rem;\n$global-padding: 1rem;\n$global-radius: 0;\n$global-width: calculateRem(1200);\n//---- sections\n$section-padding: calculateRem(80);\n$section-paddings: (\n        'header': calculateRem(20),\n        'footer': calculateRem(20),\n        'section': calculateRem(40)\n);\n$border-sizes: (\n        'light': 1px,\n        'heavy': 2px,\n);\n\n//-- typo\n$global-lineheight: 1.5;\n$font-base: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;\n$global-weight-normal: normal;\n$global-weight-bold: bold;\n//---- headers\n// nested list\n$header-font-family: $font-base;\n$header-styles: (\n        'h1': ('font-size': 32),\n        'h2': ('font-size': 28),\n        'h3': ('font-size': 22),\n        'h4': ('font-size': 18),\n        'h5': ('font-size': 16),\n        'h6': ('font-size': 16),\n);\n//---- body\n$body-font-family: $font-base;\n\n//-- colors\n//---- spot colors\n$primary-color: #ff9b83;\n$light-gray: #e6e6e6;\n$medium-gray: #cacaca;\n$dark-gray: #8a8a8a;\n$black: #0a0a0a;\n$white: #fefefe;\n//---- named list\n// this is a list. it lets you name a stack of related things. We're going to do some magic with lists.\n$named-palette: (\n        primary: #1779ba,\n        secondary: #767676,\n        success: #3adb76,\n        warning: #ffae00,\n        alert: #cc4b36,\n);\n\n//---- code accents\n$code-border-color: $black;\n$code-text-color: $white;\n$code-fill: lighten($code-border-color, 50%);\n","section {\n  &.sxn-med-gray {\n    background-color: $medium-gray;\n  }\n  &.sxn-light-gray {\n    background-color: $light-gray;\n  }\n}\n\nsection {\n  &:nth-of-type(even) {\n    @extend section.sxn-med-gray;\n  }\n  &:nth-of-type(odd) {\n    @extend section.sxn-light-gray;\n  }\n}","dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, th, td {\n  font-family: $body-font-family;\n  margin: 0;\n  padding: 0;\n}\n\np {\n  font-family: $body-font-family;\n  margin-bottom: $paragraph-margin-bottom;\n  font-size: inherit;\n  line-height: $paragraph-lineheight;\n  text-rendering: $paragraph-text-rendering;\n}\n\nem,\ni {\n  font-style: italic;\n  line-height: inherit;\n}\n\nstrong,\nb {\n  font-weight: $global-weight-bold;\n  line-height: inherit;\n}\n\nsmall {\n  font-size: $small-font-size;\n  line-height: inherit;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-family: $header-font-family;\n  font-style: $header-font-style;\n  font-weight: $header-font-weight;\n  color: $header-color;\n  text-rendering: $header-text-rendering;\n  margin-bottom: $header-margin-bottom;\n\n  small {\n    line-height: 0;\n    color: $header-small-font-color;\n  }\n}\n\ndl {\n  > dt {\n    @extend strong;\n    padding-top: $global-padding/2;\n    &:before {\n      display: inline-block;\n      content: '>';\n      padding-right: $global-padding/2;\n    }\n  }\n  > dd {\n    padding-top: $global-padding/2;\n    padding-bottom: $global-padding/2;\n  }\n}\n\ncode {\n  color: $code-text-color;\n  display: inline-block;\n  border: 1px solid $code-border-color;\n  background-color: $code-fill;\n  padding: 3px;\n}\n\n@each $header, $styles in $header-styles {\n  #{$header} {\n    $fontsize_temp: map-get($styles, font-size);\n    font-size: calculateRem($fontsize_temp);\n  }\n}","$header-font-family: $body-font-family !default;\n$header-font-weight: $global-weight-normal !default;\n$header-font-style: normal !default;\n$header-color: inherit !default;\n$header-lineheight: 1.4 !default;\n$header-margin-bottom: 0.5rem !default;\n$header-text-rendering: optimizeLegibility !default;\n\n$small-font-size: 80% !default;\n$header-small-font-color: $medium-gray !default;\n\n$paragraph-lineheight: 1.6 !default;\n$paragraph-margin-bottom: 1rem !default;\n$paragraph-text-rendering: optimizeLegibility !default;\n\n@import \"base\";","/*\nOur buttons' core scss.\n--\nNote that the scss in this file can read any variables that have been set up to the point\nwhen the compiler loads it.\n*/\n\n//-- our core button code\n@mixin button-base {\n  display: inline-block;\n  vertical-align: middle;\n  margin: $button-margin;\n  font-family: $button-font-family;\n\n  padding: $button-padding;\n\n  -webkit-appearance: none;\n  border: 1px solid transparent;\n  border-radius: $button-radius;\n  transition: $button-transition;\n\n  font-size: $button-font-size-default;\n  line-height: 1;\n  text-align: center;\n  cursor: pointer;\n}\n\n//-- paints look-and-feel over our core button code.\n@mixin button-style(\n  $background: $button-background,\n  $background-hover: $button-background-hover,\n  $color: $button-color,\n  $background-hover-lightness: $button-background-hover-lightness\n) {\n  @include button-base;\n  background-color: $background;\n  color: $color;\n\n  &:hover, &:focus {\n    background-color: $background-hover;\n    color: $color;\n  }\n}\n\n//-- to make a hollow button, remove background fills\n@mixin button-hollow {\n  &,\n  &:hover, &:focus {\n    background-color: transparent;\n  }\n\n  &.disabled,\n  &[disabled] {\n    &,\n    &:hover, &:focus {\n      background-color: transparent;\n    }\n  }\n}\n\n//-- paints border and hover styles over button-hollow\n@mixin button-hollow-style(\n  $color: $button-background,\n   $hover-lightness: $button-hollow-hover-lightness,\n   $border-width: $button-hollow-border-width\n) {\n  @include button-base;\n  $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n  border: $border-width solid $color;\n  color: $color;\n\n  &:hover, &:focus {\n    border-color: $color-hover;\n    color: $color-hover;\n    &.disabled,\n    &[disabled] {\n      border: $border-width solid $color;\n      color: $color;\n    }\n  }\n}\n\n/*\nThe \"main\" mixin that pulls it all together.\n--\nThis one @includes the main button-base mixin, and what parameters you give it when you call\nit decide the look and feel of your final button. You can do a *whole lot* with very little code this way - it's all offloaded\nto a common mixin that you can reuse a million different ways.\n */\n@mixin button(\n  $style: hollow,\n  $background: $button-background,\n  $background-hover: $button-background-hover,\n  $color: $button-color\n) {\n  @if $style == solid {\n    @include button-style($background, $background-hover, $color);\n  } @else if $style == shaded {\n    @include button-style(rgba($background, 0.2), rgba($background, 0.6), $color);\n  } @else {\n    // this is our default, if the style provided doesn't match.\n    // this will make a default hollow button style\n    @include button-hollow;\n    @include button-hollow-style($background);\n  }\n}","/*\nbutton-specific variables\n--\nWhen using scoped variables like we are here, it's good practice to use the !default keyword.\n!default sort of translates to \"set this variable, UNLESS it's already defined.\nThis way, we can set the variables in this file but if, eg, we set $button-padding in our theme variables file this won't override it.\n*/\n$button-font-family: inherit !default;\n$button-font-size-default: 0.943rem;\n\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n$button-padding: 0.85em 1em !default;\n$button-margin: 0 0 $global-margin 0 !default;\n\n$button-color: $white !default;\n$button-radius: $global-radius !default;\n\n$button-background: $primary-color !default;\n$button-background-hover-lightness: -20% !default;\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n$button-hollow-border-width: 1px !default;\n$button-hollow-hover-lightness: -50% !default;\n\n$button-color-palette: $named-palette !default;\n\n// import the scss\n@import \"base\";\n\n.button {\n  //-- pull in our core styles.\n  @include button;\n\n  /*\n  remember I said we were going to do some magic with the list in theme/_variables.scss?\n  when we have a list in sass, we can 'walk' it and repeat the same things - but a little differently - with each item.\n  this is a familiar thing for the dev crowd, but it may be new to designers.\n  @each $name, $color in $button-color-palette{} translates to:\n  \"get $button-color-palette, then for each thing in it: set variables $name from its left side and $color from its right side. Now do this with those variables...\"\n\n  I'm also sneaking in the /#/{/$variable/} syntax. I'm not saying the real word for it just yet because it's scary, but what it does:\n  Usually variables are treated as values, but /#/{/$variable} makes them be treated basically as if you'd typed it in as a word. It's good for a lot of things, but in this case it's letting us use a variable as a class name.\n  The word: \"String Interpolation\". See why I didn't lead with that? :)\n   */\n  @each $name, $color in $button-color-palette {\n    //-- make a filled button with that color and class name\n    &.#{$name} {\n      @include button(solid, $color, lighten($color, 20%), $white);\n    }\n    //-- make a hollow button with the color and class name\n    &.hollow.#{$name} {\n      @include button(hollow, $color);\n    }\n    &.shaded.#{$name} {\n      @include button(shaded, $color, $color, $color);\n    }\n  }\n}"]}
const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', () => {
    return gulp.src('scss/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed',
        }))
        .on('error', sass.logError)
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('css'));
});

gulp.task('watch-sass', ['sass'], () => {
    gulp.watch([
        'scss/**/*.scss'
    ], ['sass']);
})

gulp.task('default', ['watch-sass']);
<html>
<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header id="sxn-head">
    <h1>SCSS Playground</h1>
</header>

<section id="sxn-teaser">
    <p>Plunker has problems compiling full sass, but it <strong>is good</strong> for a peek at file structure, syntax, and things like that.</p>
    <p>If you want a more interactive experience - eg: changing things and seeing what happens - I <strong>strongly</strong> recommend doing so locally, but you'll need to have <a href="https://nodejs.org/en/" target="_blank">NodeJs and NPM</a> to do so.
    </p>
    <p><strong>How:</strong></p>
    <dl>
        <dt>Install NodeJs, if you don't already have it.</dt>
        <dd>No real explanation - just do it.</dd>
        <dt>Download the plunk</dt>
        <dd>use the download button at the top right to get a zip of this plunk.</dd>
        <dt>Extract the archive and install its node dependencies</dt>
        <dd>Unzip it, <code>cd</code> into its directory, and run <code>npm install</code></dd>
        <dt>Start the SASS builder</dt>
        <dd>run <code>npm run gulp</code> and gulp will compile the sass and watch for changes</dd>
        <dt>Start the dev server</dt>
        <dd>
          <ol>
            <li>uncommend the script tag at the bottom of this html (live reload isn't appropriate if you're not... live-reloading)</li>
            <li>run <code>npm run serve</code> to launch a live-reload server in that directory.</li>
          </ol>
          </dd>
        <dt>Open the page</dt>
        <dd>The live-reload server listens on <a href="http://127.0.0.1:3000/" target="_blank">http://127.0.0.1:3000/</a>, so open that url in your browser. Live reload is great: f5 gets old :)</dd>
    </dl>
</section>

<section id="sxn-elements-1">
    <h2>This is h2</h2>
    <h3>This is h3</h3>
    <h4>This is h4</h4>
    <h5>This is h5</h5>
    <h6>This is h6</h6>
</section>

<section id="sxn-elements-2">
    <div>
        <h4>Filled Buttons</h4>
        <span class="button primary">Primary</span>
        <span class="button secondary">Secondary</span>
        <span class="button success">Success</span>
        <span class="button warning">Warning</span>
        <span class="button alert">Alert</span>
    </div>
    <div>
        <h4>Hollow Buttons</h4>
        <span class="button hollow primary ">Primary</span>
        <span class="button hollow secondary ">Secondary</span>
        <span class="button hollow success ">Success</span>
        <span class="button hollow warning ">Warning</span>
        <span class="button hollow alert ">Alert</span>
    </div>
    <div>
        <h4>Shaded Buttons</h4>
        <span class="button shaded primary ">Primary</span>
        <span class="button shaded secondary ">Secondary</span>
        <span class="button shaded success ">Success</span>
        <span class="button shaded warning ">Warning</span>
        <span class="button shaded alert ">Alert</span>
    </div>
</section>
<footer id="site-footer">
    <p>A paragraph in a footer</p>
</footer>

<!-- Uncomment this for local live-reload <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js"></' + 'script>')</script>-->
</body>
</html>
{
  "name": "sass-primer-005",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "gulp",
    "serve": "node app.js"
  },
  "keywords": [],
  "author": {
    "name": "Kevin Ard",
    "email": "ard.kevin.84@gmail.com",
    "url": "https://therealkevinard.com/"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.15.3",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "livereload": "^0.6.2"
  }
}
This is the demo project for my [SASS Primer article](https://therealkevinard.com/article/sass-primer) at [TRKA](https://therealkevinard.com/)

The project is supposed to go along with the article and it's gisted to embed in the page, but if you happen to use node\npm you can install and play with it locally. 
- There's a gulp script that watches your sass and compiles with sourcemaps
- There's a live-reload express dev server that just plain makes life easy

To install locally: 
- clone the gist local, of course.
- run `npm install`
- To start the file watcher: `npm run watch`
- To start the dev server: `npm run serve`
 
/*
Our buttons' core scss.
--
Note that the scss in this file can read any variables that have been set up to the point
when the compiler loads it.
*/

//-- our core button code
@mixin button-base {
  display: inline-block;
  vertical-align: middle;
  margin: $button-margin;
  font-family: $button-font-family;

  padding: $button-padding;

  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: $button-radius;
  transition: $button-transition;

  font-size: $button-font-size-default;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

//-- paints look-and-feel over our core button code.
@mixin button-style(
  $background: $button-background,
  $background-hover: $button-background-hover,
  $color: $button-color,
  $background-hover-lightness: $button-background-hover-lightness
) {
  @include button-base;
  background-color: $background;
  color: $color;

  &:hover, &:focus {
    background-color: $background-hover;
    color: $color;
  }
}

//-- to make a hollow button, remove background fills
@mixin button-hollow {
  &,
  &:hover, &:focus {
    background-color: transparent;
  }

  &.disabled,
  &[disabled] {
    &,
    &:hover, &:focus {
      background-color: transparent;
    }
  }
}

//-- paints border and hover styles over button-hollow
@mixin button-hollow-style(
  $color: $button-background,
   $hover-lightness: $button-hollow-hover-lightness,
   $border-width: $button-hollow-border-width
) {
  @include button-base;
  $color-hover: scale-color($color, $lightness: $hover-lightness);

  border: $border-width solid $color;
  color: $color;

  &:hover, &:focus {
    border-color: $color-hover;
    color: $color-hover;
    &.disabled,
    &[disabled] {
      border: $border-width solid $color;
      color: $color;
    }
  }
}

/*
The "main" mixin that pulls it all together.
--
This one @includes the main button-base mixin, and what parameters you give it when you call
it decide the look and feel of your final button. You can do a *whole lot* with very little code this way - it's all offloaded
to a common mixin that you can reuse a million different ways.
 */
@mixin button(
  $style: hollow,
  $background: $button-background,
  $background-hover: $button-background-hover,
  $color: $button-color
) {
  @if $style == solid {
    @include button-style($background, $background-hover, $color);
  } @else if $style == shaded {
    @include button-style(rgba($background, 0.2), rgba($background, 0.6), $color);
  } @else {
    // this is our default, if the style provided doesn't match.
    // this will make a default hollow button style
    @include button-hollow;
    @include button-hollow-style($background);
  }
}
/*
button-specific variables
--
When using scoped variables like we are here, it's good practice to use the !default keyword.
!default sort of translates to "set this variable, UNLESS it's already defined.
This way, we can set the variables in this file but if, eg, we set $button-padding in our theme variables file this won't override it.
*/
$button-font-family: inherit !default;
$button-font-size-default: 0.943rem;

$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
$button-padding: 0.85em 1em !default;
$button-margin: 0 0 $global-margin 0 !default;

$button-color: $white !default;
$button-radius: $global-radius !default;

$button-background: $primary-color !default;
$button-background-hover-lightness: -20% !default;
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;

$button-hollow-border-width: 1px !default;
$button-hollow-hover-lightness: -50% !default;

$button-color-palette: $named-palette !default;

// import the scss
@import "base";

.button {
  //-- pull in our core styles.
  @include button;

  /*
  remember I said we were going to do some magic with the list in theme/_variables.scss?
  when we have a list in sass, we can 'walk' it and repeat the same things - but a little differently - with each item.
  this is a familiar thing for the dev crowd, but it may be new to designers.
  @each $name, $color in $button-color-palette{} translates to:
  "get $button-color-palette, then for each thing in it: set variables $name from its left side and $color from its right side. Now do this with those variables..."

  I'm also sneaking in the /#/{/$variable/} syntax. I'm not saying the real word for it just yet because it's scary, but what it does:
  Usually variables are treated as values, but /#/{/$variable} makes them be treated basically as if you'd typed it in as a word. It's good for a lot of things, but in this case it's letting us use a variable as a class name.
  The word: "String Interpolation". See why I didn't lead with that? :)
   */
  @each $name, $color in $button-color-palette {
    //-- make a filled button with that color and class name
    &.#{$name} {
      @include button(solid, $color, lighten($color, 20%), $white);
    }
    //-- make a hollow button with the color and class name
    &.hollow.#{$name} {
      @include button(hollow, $color);
    }
    &.shaded.#{$name} {
      @include button(shaded, $color, $color, $color);
    }
  }
}

section, header, footer {
}

//-- set default vertcal pads from the list in our theme file
@each $type, $padding in $section-paddings {
  #{$type} {
    padding-top: $padding;
    padding-bottom: $padding;
  }
}

//-- paint the sections
header {
  background-color: $header-background;
  padding-top: $global-padding;
  padding-right:$global-padding*2;
  padding-left:$global-padding*2;
  border-bottom: map_get($border-sizes, light) solid $black;
}

footer {
  background-color: $header-background;
  padding-bottom: $global-padding;
  padding-right:$global-padding*2;
  padding-left:$global-padding*2;
  border-top: map_get($border-sizes, light) solid $black;
}

section {
  padding-right:$global-padding*4;
  padding-left:$global-padding*4;

  &:first-of-type {
    padding-top: $global-padding;
  }
  &:last-of-type {
    padding-bottom: $global-padding;
  }
}
$section-padding: $global-padding !default;
$header-background: $dark-gray !default;
@import "base";
@import "themed-sxns";
section {
  &.sxn-med-gray {
    background-color: $medium-gray;
  }
  &.sxn-light-gray {
    background-color: $light-gray;
  }
}

section {
  &:nth-of-type(even) {
    @extend section.sxn-med-gray;
  }
  &:nth-of-type(odd) {
    @extend section.sxn-light-gray;
  }
}
/**
I use sass index files a lot - the @imports that only @import other related files.
Some people use the naming convention of calling them _index.scss, but I use the conv
of naming the index file with its parent folder name.
So theme/_theme.scss is the index file for theme.
The reason is personal: my ide has project search, and it's a lot easier to find _theme.scss than _index.scss when there are a dozen other _index.scss'
 */
//-- our main theme setup: its theme-wide variables, mixins, etc
@import "theme/theme";
//-- 'scoped' scss files
@import "sections/sections";
@import "typography/typography";
@import "buttons/buttons";
/*
Converts px size to rems.
 */
@function calculateRem($size) {
  $remSize: $size / 16;
  @return #{$remSize}rem;
}
/*
The three global theme files:
- functions: These are utilities that *create* values and they don't require variables; they load first
- variables: These are set theme values. They're used by mixins, so they load before mixins;
- mixins: These are the take-it-or-leave-it @include blocks. They load after the other two because they need the other two.
 */
@import "functions";
@import "variables";
@import "mixins";

//-- global style resets

html, body {
  margin: 0;
  // set our font size here to the same value used in the calculateRem function so rems will... work.
  font-size: 16px;
}
//-- geometry
$global-margin: 1rem;
$global-padding: 1rem;
$global-radius: 0;
$global-width: calculateRem(1200);
//---- sections
$section-padding: calculateRem(80);
$section-paddings: (
        'header': calculateRem(20),
        'footer': calculateRem(20),
        'section': calculateRem(40)
);
$border-sizes: (
        'light': 1px,
        'heavy': 2px,
);

//-- typo
$global-lineheight: 1.5;
$font-base: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$global-weight-normal: normal;
$global-weight-bold: bold;
//---- headers
// nested list
$header-font-family: $font-base;
$header-styles: (
        'h1': ('font-size': 32),
        'h2': ('font-size': 28),
        'h3': ('font-size': 22),
        'h4': ('font-size': 18),
        'h5': ('font-size': 16),
        'h6': ('font-size': 16),
);
//---- body
$body-font-family: $font-base;

//-- colors
//---- spot colors
$primary-color: #ff9b83;
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
//---- named list
// this is a list. it lets you name a stack of related things. We're going to do some magic with lists.
$named-palette: (
        primary: #1779ba,
        secondary: #767676,
        success: #3adb76,
        warning: #ffae00,
        alert: #cc4b36,
);

//---- code accents
$code-border-color: $black;
$code-text-color: $white;
$code-fill: lighten($code-border-color, 50%);
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, blockquote, th, td {
  font-family: $body-font-family;
  margin: 0;
  padding: 0;
}

p {
  font-family: $body-font-family;
  margin-bottom: $paragraph-margin-bottom;
  font-size: inherit;
  line-height: $paragraph-lineheight;
  text-rendering: $paragraph-text-rendering;
}

em,
i {
  font-style: italic;
  line-height: inherit;
}

strong,
b {
  font-weight: $global-weight-bold;
  line-height: inherit;
}

small {
  font-size: $small-font-size;
  line-height: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $header-font-family;
  font-style: $header-font-style;
  font-weight: $header-font-weight;
  color: $header-color;
  text-rendering: $header-text-rendering;
  margin-bottom: $header-margin-bottom;

  small {
    line-height: 0;
    color: $header-small-font-color;
  }
}

dl {
  > dt {
    @extend strong;
    padding-top: $global-padding/2;
    &:before {
      display: inline-block;
      content: '>';
      padding-right: $global-padding/2;
    }
  }
  > dd {
    padding-top: $global-padding/2;
    padding-bottom: $global-padding/2;
  }
}

code {
  color: $code-text-color;
  display: inline-block;
  border: 1px solid $code-border-color;
  background-color: $code-fill;
  padding: 3px;
}

@each $header, $styles in $header-styles {
  #{$header} {
    $fontsize_temp: map-get($styles, font-size);
    font-size: calculateRem($fontsize_temp);
  }
}
$header-font-family: $body-font-family !default;
$header-font-weight: $global-weight-normal !default;
$header-font-style: normal !default;
$header-color: inherit !default;
$header-lineheight: 1.4 !default;
$header-margin-bottom: 0.5rem !default;
$header-text-rendering: optimizeLegibility !default;

$small-font-size: 80% !default;
$header-small-font-color: $medium-gray !default;

$paragraph-lineheight: 1.6 !default;
$paragraph-margin-bottom: 1rem !default;
$paragraph-text-rendering: optimizeLegibility !default;

@import "base";