Last Updated: February 25, 2016
· artinruins

My SCSS structure for files and partials

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="" 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.

@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:

@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.

@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">//</a>