Organizing your SASS/Compass files using partialsPosted on: April 06, 2013

This may not be anything new, but it's really handy and I thought worth sharing for those that haven't come across it yet.

When developing your CSS, there are really handy ways/techniques you can adopt to organize your code:

  • Separating sections using good old fashioned comment blocks:

    /_===== BEGIN homepage =====_/
    .foo {
    /_===== END homepage =====_/
  • In SASS/Compass, you can have a section containing all your variables:

    $mainColour: blue;
    $spacing: 10px;
  • Likewise for all your mixins:

    @mixin knockout($_img) {
    background:url($\_img) no-repeat;
    // Found here:
    @mixin hoverActiveFocus($property, $value) {
    &:hover, &:active, &:focus {
    	#{$property}: $value;

My way of doing this before used to be to simply have one SCSS file, with compass includes at the top (@import "compass/css3"; anyone?), followed by variables, then mixins, then my code separated by comment blocks.

Enter SASS/Compass partials

See the SASS documentation for this here, but basically, what I ended up doing was splitting out the above three points into their own files: _vars.scss, _mixins.scss, and _homepage.scss (adding a new file for each section I add). Why the underscore prefix? That just tells SASS/Compass not to compile that file so that you don't have unused compiled CSS files lying around. Now I would just have one main.scss file, and the contents would look as follows:

@import "vars";
@import "mixins";
@import "homepage";

Notice that when importing the partials, you drop the _.

Adding the styling for a new section/page is really easy as well. Just create a new partial file, and be sure to add the @import to the main file and off you go.

Now when SASS/Compass compiles, you will get a single main.css file which you can then include in your pages. Happy days!

A word of caution

As mentioned by @gryghostvisuals on twitter: