Sass: Syntactically Awesome Stylesheets

Sass, or Syntactically Awesome Stylesheets, is a great tool to use for writing CSS. With Sass you can write CSS with variables, mixins, and nested elements. Sass files have the extension .scss or .sass; it compiles and is written into a .css file with normal CSS syntax. The CSS file can be compressed to save space and speed up performance. While you work in the .scss file, the browser uses the .css file. The .scss extension is for Sassy CSS syntax, similar to normal CSS with curly braces, while .sass is for the older syntax with indentations instead of curly braces. This demo uses the .scss syntax. For this demo I have used Sass in conjunction with Compass, which is a CSS authoring framework.

To start using Sass, you’ll need to install Ruby first. Then use the Ruby command prompt to install Sass and Compass. Codechewing provides a great tutorial setting up Sass and Compass up on a Windows machine. Sorry I don’t know about Macs but you may find something on Google, or try Nettuts+. Apparently Ruby is pre-installed on Macs according to the Nettuts+ article. Every time you want to use Sass, you should have the Ruby command prompt open and cd to the CSS directory (ie cd C:wampwwwsitecss), then type compass watch. That way when you edit and save your Sass file, the CSS file will update. It works best when you work on the site on your machine and upload just the CSS file onto the server, though it doesn’t hurt to keep an extra copy of your Sass file on the server as well.

I’m still learning Sass, though it wasn’t too hard to pick up the basics. The Sass Web site does a nice job to show you the different features Sass has in both .scss and .sass format. There are variables, nesting, mixins, and selector inheritance. The features I’ve used the most are variables and nesting. I won’t go into too much detail about variables, nesting, mixins, and selector inheritance, but you may be interested in seeing an example of it all being used on a simple Web page. Please see the demo below:

Variables

Putting the variables in one place helps to organize the information and easily make changes to recurring attribute values. In my demo I use the following variables:

$main-width: 1200px;
$center: 0 auto;
$border: 1px solid #ccc;
$vert: top;
$horz: left;
$radius: 20px;
 
$text-color: #555;
$title-color: #78c3b6;
$heading-color: #67bce5;
$subheading-color: #7d53a7;
$link-color: #e00400;
$link-hover-color: #fff;
$date-color: #232323;

They’re all pretty self explanatory. The variable is in the format $variable_name: assigned value;.

Nesting

The nesting helps organize the content in a way that is better than what CSS does in my opinion. They nest elements similar to how HTML structure has the elements nested. They also help avoid repetition. Here’s an example of nested elements:

header {
  background: #ddd; line-height: 5rem; border-top: 5px solid $title-color; position: fixed; width: 100%; z-index: 100; box-shadow: 0 0 1em #aaa;
    div { max-width: $main-width; margin: $center; padding: 0 2.0rem; }
   h1 { display: inline-block; vertical-align: middle; }
 nav {
     display: inline-block; margin-left: 20px;
     li { display: inline-block; }
     a { display: inline-block; margin: 0 1.5rem 0 0; padding: 0 10px; border: $border; border-radius: 15px; background: #fff; }
       a:hover { background: #aaa; }
 }
}

The main container element is the header and inside the header there’s a div, h1, nav, and within nav there is a list and an anchor.

Mixins

Mixins are even more useful than variables in that they allow you to reuse whole chunks of code. Here’s an example of a mixin for a rounded top left corner, which also uses interpolation, variables used in property names and selectors:

@mixin rounded-top-left {
 $vert: top;
   $horz: left;
  $radius: 20px;
    border-#{$vert}-#{$horz}-radius: $radius;
}

That code converts to the following CSS:

border-top-left-radius: 20px;

This may look like writing more code than CSS, but if you are repeating this multiple times, it’s actually faster and easier to use. For instance, see the following use:

article {
    margin: 0 0 20px; padding: 20px; border: $border; background: #fff; @include rounded-top-left;
}
aside {
    width: 30%; float: right; background: #ddd; border: $border; @include rounded-top-left; margin: 0 0 20px;
}

The part @include rounded-top-left is all you have to write, and it would be easy to edit it for those multiple occasions. For instance, you may decide to change the radius to something smaller or larger, or you wanted it to be in the upper right corner instead or some other corner for all occasions that contain that mixin. It’s easier to edit the variables in the mixins than it is to edit each occurrence one at a time. At least that’s the reasoning I came up with. Maybe there are more than two occurrences, the more the more worthwhile to use a mixin.

Selector Inheritance

Selector inheritance is used to help reduce duplicates. For instance, a class has features that another class would like to use/inherit, but that other class has features that the first class doesn’t have. Here’s an example from the demo:

section { float: none; width: 100%; }
  aside { @extend section; margin: 0; border-radius: 0 }

That’s it for the basics. What are your thoughts on using Sass, such as mixins and other features?