example.scss

@charset "utf-8";                    // Character type for the stylesheet

// ITCSS: SETTINGS
@import "_var.sass";                 // Sass Variables - Does not effect page, but other Sass files reference this file.


// ITCSS: TOOLS
@import "_mixins.sass";              // Sass Mixins - Does not effect page, but other Sass files reference this file.
@import "_functions.sass";           // Sass Functions - Does not effect page, but other Sass files reference this file.


// ITCSS: RESETS - Remove inconsistencies in the way different browsers render elements by default
// npm install --save-dev meyer-sass normalize.css
@import "../node_modules/meyer-sass/_meyer.sass";   // The Eric Meyers resets - Good for older browsers and fringe cases.
@import "../node_modules/normalize.css/normalize";  // Normalize.css - Good for mobile and modern browsers


// ITCSS: FRAMEWORKS/THEMES


// ITCSS: PLUGINS


// ITCSS: GENERIC (ELEMENTS/BASE)
@import "_base.sass";                // h1, h2, h3, p, etc.
@import "_layout.sass";              // General layout classes, like .col-xs-4
@import "_utility.sass";             // Utility classes, like .wrapper or .text-center


// ITCSS: OBJECTS - Grouped reusable chunks
@import "_hamburger.sass";           // pure css hamburger menu that animates on click


// ITCSS: COMPONENTS - Component-specific styles
@import "_nav.sass";                 // General navigation styles used in the top/side nav


// ITCSS: CONTAINERS
@import "_topnav.sass";              // Nav styles unique to when it is in the header
@import "_sidenav.sass";             // Nav styles unique to when it is in the sidebar


// ITCSS: TRUMPS
@import "_atomic.sass";              // Atomic classes are typically added to elements to override a specific css property
@import "_mediaqueries.sass";        // Adjusts the CSS of elements depending on browser or device resolution. Adaptive Web Design.
@import "_trumps.sass";              // Use sparingly. These are meant to override above styles by using more specific selectors
@import "_shame.sass";               // This is code you wrote to meet a deadline and need to come back and fix later