When I first started using SASS and breaking my SASS into partials, I struggled to figure out the best way to break up the files. Do you put all of your fonts in a fonts partial? Does a layout partial only include my grid, or does it also include the margin around my header?
What Is A Partial?
Depending on the size of your website, CSS files can get really long, really fast. When writing plain CSS, there is only one way to break up those long CSS files into manageable chunks: create multiple CSS files, and separately link them one by one onto each page of your website. This is obviously bad since each request to the server for each CSS file adds more load time to your website.
You could also use
@import in your stylesheets to pull all of the stylesheets together into one file. The problem here is the stylesheets won’t load concurrently, and you will have to wait for each stylesheet to load before the next one begins loading. This can considerably drag down the speed of your website.
Along came SASS (and LESS and Stylus), a CSS pre-processor that allowed you, along with tons of other great features, to break up those CSS files into partials; small files that are processed into one CSS file that can then be loaded onto your website.
When naming your partials, make sure to always begin the name of the file with an underscore, followed by the name of the file and then the .scss ending. This tells SASS that the partial file can never be processed on it’s own, and must be included in another .scss file. We then can combine them all together by creating one main SASS file, and including all of those partials together. Think of it kind of like includes in PHP. It’s a great way to organize all of your files and keep things manageable.
/* This is the main .scss file: styles.scss */ @import "partial1"; @import "partial2"; @import "partial3"; /* etc., etc. */
Organizing Your Partials
After some experimenting, I found that the best way to break up my partials was to divide them up the same way I divided steps for building my front-end code. My usual process generally includes the following steps, in this order:
- Set up my resets (whether that’s using Eric Meyer’s Reset, Normalize or your own home-spun solution);
- Set up my basic settings (box-sizing, site-wide font on the body tag, importing fonts, 100% max-width on images and videos);
- Set up my grid (this step usually coincides with my wireframes);
- Set up my layout (this is basic layout of my modules, including headers, footers, main body, sidebar);
- Style my basic layout modules (this includes colors and design elements of the modules, but not text);
- Set up my basic styles (this step coincides with my style guide, and includes the styling of all basic text, image, table and form elements in all modules);
- Set up special cases (for example, if I have a form that doesn’t follow the basic styling of all the other forms on the website).
When I set up my initial partials, I set them up like this:
styles.scss (includes all partials) _reset.scss _settings.scss _grid.scss _layout.scss _modules.scss _othermodules.scss
I know there are a lot of other ways to do this, and it really is up to you. As long as you understand how your code works, and can explain it to anyone else who might also be working on it, I think that’s what matters.
Many people group similar CSS rules in the same files. For instance, all font rules in a _fonts.scss partial, all margins and paddings in a _layout.scss partial, etc. I find this difficult to wrap my head around, simply because you end up writing the same CSS selectors in multiple places. When debugging code, I find it easier if all of my .thisclass CSS rules are in the same partial. Again, just personal preference.
How do you set up your SASS partials? I’d love to hear some other ideas.