Styling with Sass and Compass

scottkellum edited this page Oct 4, 2011 · 4 revisions

Sass allows for a huge amount of control over your Treesaver layouts. Instead of settling with default widths of columns, gutters, margins and so on you can control every aspect of your grid as well as turning on and off different features as you need them.

For a list of some of the tools included jump to the Sass/Compass functions and mixins quick reference.

Keeping things simple and organized

To keep things simple, all the grid calculation and basic features get nailed down in the core stylesheets where you need not bother to go. All of the styling choices you need are up front and as clean as possible in the config, skin, and chrome. This leaves you with a blank slate for you to do anything you want with the [tools](Sass functions and mixins) to make it happen fast.


The first step you probably want to take is configuring your layouts in the _config.sass file. These are the basic measurements and colors you can use throughout your project. You can also add and remove sections of the framework you may not wish to use like the vertical grid, caption placement, and so on. This can keep the compiled CSS small and clean.


The _skin.scss file will get you started styling the pages themselves. Style content just as you would on any other project, but it is recommended that you keep styles strictly to elements on the pages themselves so things don't get too cluttered.

There are a few things to keep in mind when styling.

  • Everything within text columns should be a multiple of the line-height. You can call the sass variable for line-height and multiply it for these measurements $line-height * 2.
  • .column needs to be the same width across all the grids in a set. If you have a different column width try defining it nested directly inside your grid set definitions like so: .department.grid {.column {width: grid(3)}}


The user interface is all styled with _chrome.scss. Really, you can do what ever you want to style this. It is recommended you absolute position various elements around the screen but the interface is really up to you to create.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.