Stylesheet structure

app.scss

/* ==========================================================================
   Application Styles
   ========================================================================== */

@charset 'utf-8';

/**
 * Style Dependencies
 */

@import "node_modules/normalize.css/normalize";
@import "node_modules/normalize-opentype.css/normalize-opentype";


/**
 * Variables
 *
 * Site-wide style configuration variables and settings.
 */

@import "variables";


/**
 * Mixins
 *
 * Generic, reusable styles that can be included in other classes.
 */

@import "mixins/helpers";


/**
 * Modules
 *
 * A style module applies globally, effecting all content in the application,
 * e.g. typography, box-sizing, selection colour, etc.
 *
 * Note: global layout and application-wide UI elements should be implemented
 * as a component (see below) not a module.
 */

@import "modules/box-sizing";
@import "modules/typography";


/**
 * Components
 *
 * A style component is responsible for styling a single HTML/JavaScript
 * component. These styles are scoped to class name of the component, and
 * should not affect other components or elements in the application.
 * Avoid using element selectors here, and stick to the BEM methodology.
 *
 * BEM resources:
 * http://getbem.com/introduction
 * http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax
 * https://css-tricks.com/bem-101
 */

@import "components/document";


/**
 * Helpers
 *
 * Helper classes for achieving common tasks (e.g. clearfix, visuallyhidden).
 * These classes have been extracted from HTML5 Boilerplate, and are also
 * available as SASS mixins (see above). Use the class form for dynamically
 * changing state in JavaScript.
 */

@import "helpers/helpers";


/**
 * Print
 *
 * Style overrides for printed content should come at the end.
 */

@import "print/print";

components-document.scss

/* ==========================================================================
   Document
   ========================================================================== */

body {
  @include clearfix;
  
  padding: 2em;
}

helpers-helpers.scss

/* ==========================================================================
   Helper classes

   These classes implement the mixins in mixins/helpers. You should prefer
   using the mixin versions, and use these classes for dynamically changing
   the state of an element through JavaScript (using `el.classList.add()`
   or similar.
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
  @include hidden();
}


/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
  @include visuallyhidden();
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  @include visuallyhidden_focusable_active();
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  @include invisible();
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *  `contenteditable` attribute is included anywhere else in the document.
 *  Otherwise it causes space to appear at the top and bottom of elements
 *  that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *  `:before` to contain the top-margins of child elements.
 */

.clearfix {
  @include clearfix();
}

mixins-helpers.scss

/* ==========================================================================
   Helper classes
   https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L107
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

@mixin hidden() {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

@mixin visuallyhidden() {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

@mixin visuallyhidden_focusable_active() {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

@mixin invisible() {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *  `contenteditable` attribute is included anywhere else in the document.
 *  Otherwise it causes space to appear at the top and bottom of elements
 *  that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *  `:before` to contain the top-margins of child elements.
 */

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after {
    clear: both;
  }
}

modules-box-sizing.scss

/* ==========================================================================
   Box Sizing
   http://www.paulirish.com/2012/box-sizing-border-box-ftw
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
   ========================================================================== */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

modules-typography.scss

/* ==========================================================================
   Typography
   ========================================================================== */

html {
  font-family: sans-serif;
}

print-print.scss

/* ==========================================================================
   Print styles.

   https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L197

   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after,
  *:first-letter,
  *:first-line {
    background: transparent !important;
    color: #000 !important; /* Black prints faster:
                               http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

variables.scss

/* ==========================================================================
   Variables
   ========================================================================== */