Hi, I'm Nicholas Johnson!

software engineer / trainer / AI enthusiast


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


Example - Dropbox

Exercise - Nested Sass

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

Exercise - Variables

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

Exercise - Mixins

  1. Create a transition mixin which applies a css-transition with vendor prefixes.
  2. 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”