Sass file structure

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


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


  • 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>


  • 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


  • 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.