What is SASS?

By | September 25, 2012

Today the question is what is sass? As you may have noticed I’ve been away for a while. Big project at work, lots of things to learn and just not enough time to write the blog. But now it’s time to start again and what better subject than my new favourite thing SASS.

What is SASS?

To quote the official Sass website:

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

SASS came along a few years ago but the original syntax uses the Haml style of indentation. I’m much more of a fan of the SCSS syntax because it’s very much like CSS and really easy to learn the basics. In this post we’ll look at some of the basics then in further posts

Getting started with SASS

The first thing that we need to look at are variables but before you freak out remember “Sass makes CSS fun…”

Variables

Use the same primary colour all over your site? Sass supports variables as well as basic math operations. The idea is that you put any values that you reuse in your CSS in variables then use the variable name in your SCSS. If the brand manager then decides that the primary blue colour that you use is the wrong shade (coz his one of the 10 million focus groups someone didn’t like it) then all you have to do is change the variable value and the rest is done for you. Neat huh?

$blue: #007fac;
$margin: 16px;

.navigation {
   color: $blue;
   border-color:
    darken($blue, 9%);
}
.border {
  padding: $margin / 2;
  margin: $margin;
  border-color:
    darken($blue, 9%);
}

This outputs css like this:

/* CSS */

.navigation {
  color: #007fac;
  border-color: #0179a3;
}

.border {
  padding: 8px;
  margin: 16px;
  border-color: #0179a3;
}

As you can see you can create variables and then manipulate them. In the example we create 2 variables one for colour and one for margin we then use the colour variable as is but also use a version that is 9% darker. With the margin we use the width as is but then for padding we use half the width of the margin that equals 8px.

Nesting

To avoid having to repeat yourself with your CSS selectors the clever guys at SASS have created nesting that is like shorthand CSS.

/* SCSS */

ul {
  margin:0;
  list-style:none;
  li{
  float:left;
   a{
     display:block;
     background-color:red;
    }
 }
}

When preprocessed this becomes:

/* CSS */

ul {
  margin:0;
  list-style:none;
}
ul li{
  float:left;
}
ul li a{
     display:block;
     background-color:red;
}

Selector Inheritance

You can inherit all the properties from a selector without having to duplicate the rules.
For example:

/* SCSS */

.some-style {
  border: 1px #f00;
  background: #fdd;
}

.some-other-style {
  @extend .some-style;
  border-width: 3px;
}

This will output the CSS below:

/* CSS */

.some-style, .some-other-style {
  border: 1px #f00;
  background: #fdd;
}

.some-other-style {
  border-width: 3px;
}

Mixins

This is where the true power of SASS comes to light. They’re little chunks of reusable code (like functions) that you can pass arguments into to. Below is a simple border radius mixin.

/* SCSS */
@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

Now to use this mixin we just put:

/* SCSS */
.btn {
  @include rounded-corners(4px);
}

This will output the CSS as follows:

/* CSS */
.btn {
   border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

This is an extremely simple example but you can see the time that is saved by creating these mixins up front then referencing them in your SCSS file.

One of the real plus points for SASS over the other main CSS preprocessor Less is that SASS has Compass which has amongst other things a full library of CSS3 mixins.

I will talk more in depth about Compass and mixins in my next post but for now I hope that has wet your appetite for investigating SASS more deeply.

Other posts in the series

23

3 thoughts on “What is SASS?

  1. Ken Sayers

    Hi Matt,

    I was using this post to try Sass. Great introduction thanks. One thing though I couldn’t get rounded-corners mixin to work.

    I think you need to add ‘@include’ before rounded-corners.

    @include rounded-corners(4px);

    Thanks
    Ken

    Reply
    1. Matt Walker Post author

      Cheers Ken.

      I missed that. I have updated the post accordingly.

      Matt

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *