Menu icon Foundation
How do you organize you SCSS files?

I been working on a WordPress starter theme, I am using Genesis WordPress ( https://github.com/genesis/wordpress ) as the base and built the theme to work with Yeoman. I setup Bower for package managing, Bundler as a Dependency manager, and I am using Grunt to build, and do a ton of other task. I am now just working on the finishing touched before I release it.

So I am stuck on one item. What the best way to manage the SCSS files. I seen it done in a single huge mile long files with commented sections, a bunch of files in one directory. I seen them broken into folder with names like base, breakpoints, components, generic, layout, modules, objects, partials it all starts to make my head spin sometimes.

So here is my questions for the community, so myself and other can have a great starting point.

How do you manage your SCSS files and what the theory behind you organization system?

Thanks for taking time to comment!

James W. Lane

scssOrganizeworkflow

I been working on a WordPress starter theme, I am using Genesis WordPress ( https://github.com/genesis/wordpress ) as the base and built the theme to work with Yeoman. I setup Bower for package managing, Bundler as a Dependency manager, and I am using Grunt to build, and do a ton of other task. I am now just working on the finishing touched before I release it.

So I am stuck on one item. What the best way to manage the SCSS files. I seen it done in a single huge mile long files with commented sections, a bunch of files in one directory. I seen them broken into folder with names like base, breakpoints, components, generic, layout, modules, objects, partials it all starts to make my head spin sometimes.

So here is my questions for the community, so myself and other can have a great starting point.

How do you manage your SCSS files and what the theory behind you organization system?

Thanks for taking time to comment!

James W. Lane

Wing-Hou Chan over 5 years ago

I usually separate keep a partial for each page and also partials for separate, global components and import them into one SCSS file.

For example:

@import
  "foundation",
  "global/header",
  "global/nav",
  "global/footer",
  "pages/home",
  "pages/about",
  "pages/contact";

I can now identify which file is for which component or which page.

You can see I've imported Foundation into this file. You'll have to remember to make it a partial.

I'm also interested in how others organize their SCSS. Keep the comments coming!

Rafi Benkual over 5 years ago

This is a great question!

@Wing thanks for sharing your method!

At ZURB we do a very similar method. This Notable post will detail how we set up our marketing site https://www.notableapp.com/posts/b914606540e3902e0f8635b681a81121a346fc0b

Jari Warpenius almost 5 years ago

Hi James!

Your project is very interesting. Did you finish it and managed to handle scss files in a clever way? I would be greatly interested to test your project :)