Multiple SCSS files in Sublime Text

A Little Structure For Your Large Sass Project

Matthew Anderson
Aug 14, 2013 · 4 min read

When working on large projects, even the best CSS comments in the world only get you so far. The bigger the project gets, the more troublesome the inability to properly segment CSS becomes. Eventually, you start clobbering yourself, duplicating code, and finding it increasingly difficult to troubleshoot bugs. Last year, I finally ported the Onehub CSS framework to Sass. This provided a perfect opportunity to develop a proper organizational structure to try and avoid these kinds of problems.

Among the many benefits of Sass, is the ability to break your CSS into any number of folders and files using partials. Partials are not compiled down to actual CSS files; they are designed to be imported into other files. Creating them is as easy as appending an underscore to the beginning of your filename. This immense flexibility presents a rather subjective question:

How should I organize my project?

The following project structure is where I eventually landed. It has proven to be both easily maintainable and highly flexible.

/framework
/modules
/vendor
/section 
_bootstrap.scss
section.scss

/framework

_defaults.scss // Global variables and Compass defaults.
_media-queries.scss // Variables and mixins for breakpoints.

/modules

_buttons.scss
_icons.scss
_forms.scss

/vendor

jquery.ui.core.scss
_overrides.scss

/section

/screen
/print

For larger projects though, these folders are used to signify unique areas, such as:

/admin
/sign-in

If you really want to keep your files neat and tidy, you could even nest additional section folders inside of each other. Be creative. The only rule I follow here is that for every top-level section folder, I create a matching top-level section file.

_bootstrap.scss

@import ‘compass’;
@import ‘compass/reset’;@import ‘framework/all’;@import ‘vendor/jquery.ui.core’;
@import ‘vendor/overrides’;@import ‘modules/buttons’;
@import ‘modules/icons’;

Now, you can import all of your global styles into any section file with a single line of code.

@import ‘bootstrap’;

section.scss

  1. Bootstrap itself
  2. Import any additional modules/vendor used in that section
  3. Import all partials from the matching section folder

For example, the section file for your Admin area might look something like:

// admin.scss@import ‘bootstrap’;@import ‘modules/forms’;@import ‘admin/accounts’;
@import ‘admin/dashboards’;

The flexibility that Sass brings to your projects can be both a blessing and a curse. Fortunately, a little bit of structure can go a long way towards reinforcing your process. This is just one example of how you can organize your Sass projects to try and avoid the inherent complexities of CSS files from the past. If you have ideas on how my implementation could be improved or a structure of your own to share, let me know. Branch this post or hit me up @wanderingmatt.

    Matthew Anderson

    Written by

    VP of Product @onehub. Co-host @chipsnbits. Canadian. I design, code, and ship useful things.