Sass file structure

The sass file structure has been designed to keep your code in good order.

Abstractions

• Contains mixins to use throughout the rest of the scss files

Base

• This folder should include styles for basic, reoccurring HTML elements.
  • _page.scss for whole page layouts
  • _media.scss for general media styling
  • _footer.scss for the <footer> section
  • _header.scss for the <header> section
  • _typography.scss for base typography styles like <p> and <h2>

Components

• This folder is for component specific theming
  • _blocks.scss for block specific theming
  • _forms.scss 
  • _front.scss (maybe remove this? front page styling?)
  • _navigation.scss for menus
  • _paragraphs.scss for paragraph bundles
  • _views.scss for drupal views

Variables

• This folder should be where you declare your variables like...
  • Colors
  • Breakpoints
  • Grid/gutter values 
  • Font stacks

Other files of note

• ie.scss for internet explorer specific styling
• print.scss for print specific styling
• hacks.scss for quick fixes
• styles.scss combines all the scss files and imports libraries like compass.