Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor. It is to CSS, what CoffeeScript is to Javascript. With stylesheets getting larger, more complex and harder to maintain, Sass lets you use features that don’t exist in CSS such as variables, nesting, mixins, inheritance and other features that make writing CSS fun again.

SASS and SCSS – What’s it about?

When Sass was first released, the syntax was quite different from CSS. It used indentation instead of braces, didn’t require semi-colons and had shorthand operators. But in version 3, Sass changed its main syntax to .scss. SCSS is a superset of CSS, and is basically written the exact same way but with all the fun new Sass features.

For the following demo, I will be using .scss as an example.

/*SASS code*/
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
 font: 100% $font-stack
 color: $primary-color

/*SCSS code*/
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Installation – Setting it up

As mentioned earlier, SASS is a CSS preprocessor, so the code in .scss extension can’t be used until it is compiled into CSS. First and foremost, you’ll need to set it up on your machine. Here’s a quick link to learn how to get everything set up.

My favorite tool is Koala, a GUI application for Less, Sass, Compass and CoffeeScript compilation. It is the simplest way to use Sass, and it is available on Mac, Windows, and Linux.

What can Sass do?

Variables

Sass brings variables to CSS and you can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable.

Here’s an example:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: $font-stack; 
  color: $primary-color;
}
/* it will produce */
body {
  font: Helvetica, sans-serif;
  color: $333;
}

Nesting

Another cool feature about SASS is nesting. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Here’s an example:

nav {
 ul {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 li {
  display: inline-block;
 }
 a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
 }
}

/* it will produce */

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
nav li {
 display: inline-block;
}
nav a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}

Partials

You can separate your Sass file accordingly. For instance, you can separate it into layouts, typography and more. A partial is simply a Sass file named with a leading underscore. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Import

Let’s say you have a partial called _layout.scss. You can import it this way.

import "layout";

You don’t need to add the extension, just the name of the file.

 

So there you have it, we’ve covered the how to set up Sass and learn about its preliminary functions. Mosey on over to Part 2 for the rest of this series.

Part 2

See what you like? Subscribe to Stampede Constructs, so that you’ll know when we’ve got something new for you.