Organizing your SASS/Compass files using partials Posted on: 2013-04-06

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 {
      color:blue;
    }
    /*===== 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;
      display:block;
      height:image-height($_img);
      overflow:hidden;
      text-indent:-9000em;
      width:image-width($_img);
    }
    // Found here: http://css-tricks.com/redesigning-with-sass/
    @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: