Using SASS in Orchard with Style Guidelines

0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×

As part of my first attempt with Orchard CMS I have also decided to give SASS a go.

For those that dont know, SASS stands for Syntactically Awesome Stylesheets, and is an extension of CSS – I came across it from a Scott Hanselmann post about the free Mindscape Web Workbench (available through visual studio extension manager), which includes SASS, LESS and CoffeeScript.

In web workbench you create a SASS file (with scss extension), which when saved creates a css file in the same location, populated with valid css. The nice thing is the features that this scss file has (thanks to sass). What I really like about sass (and why I’m giving it a go), is nesting and variables.

The nesting allows you to write more naturally nested css, which then gets outputted to valid css. For example:


You get the picture – it removes a bit of the flat-ness from the css file!


The variables are also really great, and work like this:

This is something css designers have been wanting for years, and combined with the web workbench its nearly seamless, and has intellisense. (There’s more examples on the sass website:

Whats this got to do with Orchard CMS

So why did I bring up my Orchard adventure?! Well in the Guidelines for Theme Authors (, the Orchard team suggest using a css structure originally suggested by Dan Cederholm of SimpleBits (sorry, cant find the original article). I’ll restate it here:

This is a great little structure, can make your stylesheet much easier to understand and complements sass nicely.

The one thing I did straight away was replace the colours palette section, with sass variables. So:


And I’m sure there’ll be loads more little gems like this as I get more into sass mix-ins!!


, , ,

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×