Code Responsible

Skip navigation

SASS Structure Boilerplate

sass glasses

After reading the book SMACSS and finding it very helpful I used some of the ideas in my SASS build. I’ve found breaking the SASS files out into directories (Utils, Base, Layout, Modules, and Themes) helps organize your files in a project and compile CSS into a clean, logical file. Each page has a SASS (.scss) file created that acts as a project file that imports the individual modular components from Utils, Base, Layout, Modules, and Themes that are needed to build the particular page.

A great tool to help create a good structure for your Sass files is Sassy Sass.

SASS Directories

  1. Utils

    The utils directory contains Sass partials files like:

    • Vendor dependancies (Compass, Foundation)
    • Authored dependancies (Mixins, variables)
  2. Base

    The base directory contains styles that help start a project. The base directory could contain the following type of SASS files:

    • Variables
    • Fonts
    • Reset
  3. Layout

    The layout directory contains styles that are large containers of a page. This directory could include SASS files like:

    • Responsive Grid
    • Page specific layouts
  4. Modules

    The modules directory will probably contain the bulk of your SASS files. A page may consist of multiple modules and should be style individually. These modules may include files like:

    • Header
    • Footer
    • Navigation
    • Content Block
  5. Themes

    The themes directory contains any specific styles that a page may need to change from the generic layout or modules. For example the header in your website maybe green throughout a website or application but on a specific page you want it to change to a blue background that’s where the themes files would come in.

41 Posts

Ryan Burgess

Ryan Burgess is a Manager, UI Engineering at Netflix in San Francisco, California. Previously at Evernote. Listen to Ryan on the Front End Happy Hour podcast. He's also the creator of SensesLost.com, an online-based arts and culture magazine that focuses on graffiti and tattoo art.

Leave a Reply

Comment Form