SASS

SASS is Syntactically Awesome StyleSheets. It's similar to LESS, and most of what we learn here will also apply to LESS.

Refer to the documentation here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

CSS is valid SASS

One of the great things about SASS is that any CSS file is also valid SASS, so you can start using it right away.

a {
            color:#f00;
          }

Variables

We can define variables in sass, like so:

$red: #f00;
          a {
            color:$red;
          }

Functions

SASS comes with a set of built in functions that we can use to transform variables, like so:

$red: #f00;
          a {
            color:darken($red, 30%);
          }
          a:hover {
            color:lighten($red, 30%);
          }

Maths

We can perform maths functions in our SASS to generate sizes. Here is a simple 2 column layout with a gutter.

$desktop: 1000px;
          $gutter: 20px;
          
          body {
            width: $desktop;
          }
          article {
            width: $desktop / 3 * 2 - $gutter;
            float:left;
          }
          aside {
            width: $desktop / 3 - $gutter;
            float:right;
          }

Nesting

We can nest our sass like so:

article {
            a {
              color: red;
            }
            strong {
              font-weight: normal;
            }
          }

This will generate something like the following:

article a {
            color: red;
          }
          
          article strong {
            font-weight: normal;
          }

Exercise - Gulp-sass

Use gulp-sass to compile sass. Have a look at the gulp-sass project and try to create a sass task to compile your sass. You may wish to concat it first.

Exercise - Nested Sass

Write nested queries to style the header with a horizontal nav bar, nicely positioned h1, and pretty background colour.

Exercise - Variables

Create a $header_colour variable. Use it to set the background-color of your header.
Create a $font_size variable (12px) and a $font_scale variable (1.5).
Set the font-size to be the $font_size variable.
Set the h2 font-size to be $font_size * $font_scale
Set the h1 font-size to be $font_size * $font_scale ** 2
Adjust the $font_size. See how everything updates. Woot!

Further Exercise - Mixins

Create a button mixin which sets a width, a height, a background-color, a padding and display:inline-block. Apply it to input type="submit", button, and a class="button"

Downloads

Example - Dropbox