Last Updated: February 25, 2016

My SCSS structure for files and partials

#pe1999

Compass and SCSS allows each team to come up with what works best for them. Over the course of the last year, the <a href="/team/project-evolution" target="_blank">Project Evolution</a> team has come up with our structure for new projects and old ones, as we bring their code into SCSS. I thought it might be nice to share what files we have and why.

Our Partials

_base.scss = Our project set up. Compass imports, grid variables, default variable values, and color scheme variables. Except for colors, the values remain the same from project to project.
_debug.scss = A great library of CSS3 styles to help detect empty elements, poorly-formed code or common elements that will throw an error in a WC3 validator. Based on <a href="http://www.tomato-root.com/sandbox/holmes/" target="_blank">Holmes</a>.
_functions.scss = Here we place the functions that we would like to remain consistent from project to project. Anything that we create that could have wider use goes here.
_mixins.scss = And here is where we put mixin functions that are specific to the project at hand. Container style mixins, repeatable styles, etc…
_fonts.scss = We like to Base64 our font files whenever possible, and since that creates a large chunk of gibberish code, we keep it separate from the rest of our stylesheets. Icon fonts are included here as well, with any icon-specific declarations.

Our main Stylesheets

_layout.scss = Ok, I lied. One more partial. This one, though, is the bulk of our "large screen" layout and media-queries. Instead of wrapping style sets in a media-query block, though, we wrap them in a @mixin block. I'll explain more further down.
style.scss = All of our mobile-first declarations. At the top we @import base, functions, and mixins, and we open with an @include for our html5_boilerplate mxin (located in functions.scss). Then the rest of our styles follow. At the bottom, we @import the fonts.scss partial.
mq.scss = All of our media-query mixins, wrapped in actual media-query declarations.
no-mq.scss = All of the code that we want to deliver to old IE browsers. As a guideline, almost any set of styles that is encased in a (min-width: XXem) declaration is included here, as all of them together add up to the ~960px layout that we want old IE to display. Any style set meant for screens less than ~960px (like max-width: 32em) is not included here. We can also include any IE7 and 8 specific hacks that need to be made.

The contents of _layout.scss, mq.scss and no-mq.scss

Here is an example of why we have things structured this way. In _layout.scss, we wrap what is going to be our media queries in a @mixin. It will become clear why in a minute.

_layout.scss: 
@mixin max_width_640() {
    // Styles here
}
@mixin min_width_800() {
    // Styles here
}

For browsers than understand media-queries, we include this style set inside of our actual media-query, like so:

mq-scss:
@media (max-width: px2em( 640px )) {
    @include max_width_640(); 
}
@media (min-width: px2em( 800px )) {
    @include min_width_800(); 
}

Finally, for less-capable browsers, we include only the styles that we need to create a full ~960px desktop experience.

no-mq-scss:
@include min_width_800();

In this way, it is rather painless to deliver styles to both media-query-enabled browsers and non, while keeping our code fairly organized.

This is a follow-up to another Pro-Tip about the current best-practice for linking stylesheets in the <head> of your document: <a href="/p/5nwvdg">//coderwall.com/p/5nwvdg</a>