{SASS: Tutorials}

Lesson 1: Getting Started

SASS (which stands for ‘Syntactically Awesome Stylesheets’) is a preprocessor for CSS which means that all code is converted into CSS, like a compiler would, once it is ready – as apposed to at run-time through the web browser. Because SASS just works as a preprocessor it can only accomplish what CSS can achieve – so why do we bother using it?

SASS makes the life of web developers, like you and me, easier in the short-term by making code quicker to write and in the long-term by making any maintenance work simpler to conduct. It also allows for the re-usability of code, making your initial SASS files smaller.

Developers have long yearned for the ability to further develop the CSS language to do more. For example, native CSS variables are currently being developed but can’t match the accuracy and support of a preprocessor.

History

SASS was first designed and developed by Nathan Weizenbaum and Hampton Catlin. It first appeared in 2007 and is built upon the Ruby programming language as an open-source project, which can be found on GitHub.

There are two different syntax interpretations in use – which I know is confusing – but they aren’t too different. The original focuses on using indentation and line breaks to separate code blocks and properties whereas the widely accepted, newer syntax (as of SASS3) named ‘SCSS’ tries to use the CSS rules of ending properties with semi-colons and wrapping code blocks in brackets.

To demonstrate the difference:

Original SASS Syntax

$variable: #333333
$next: #0033CC

.heading
    background-color: $variable
    color: $next

SCSS Syntax

$variable: #333333;
$next: #0033CC;

.heading {
    background-color: $variable;
    color: $next;
}

These tutorials will focus primarily on using the newer SCSS syntax – because it’s much nicer 😉 but an exploration into both is recommended.

In the next tutorial we will look at the beginnings of SASS and how to install it on your machine.

Get in Touch



[Coming Soon]

...in the mean time, talk to me on twitter, @eddturtle.