Introduction to Sass

What is Sass?

The very first thing we need to to is to address the question of what exactly Sass is. Sass, stands for Syntactically Asesome Style Sheets. "Oh, so sass is just CSS!", you may be thinking to yourself. Unfortunately, you're close but not quite there. What Sass is, is a CSS preprocessor. This means, it lets you write your CSS using a special syntax called SCSS (Sassy CSS), and when you're done, it compiles the SCSS into pure CSS that your browser can understand. You may be thinking to yourself, "If Sass just compiles into pure CSS, why not stick with that?" That's a great question! Keep on reading to find out.

Why should you use Sass?

Probably the best reason to use Sass in the first place is CSS itself. While functional in a "git-er-done"" kind of way, CSS can be unruly and messy. Writing the correct chain of selectors can be a headache and remembering the exact combination of hex or RGB values you used to style a given element requires a lot of copying and pasting, or perfect memory.

CSS is admitedly not a programming language, but if we could introduce some of the ideas that make programming great, writing stylesheets might become a more enjoyable process. That's exactly where Sass steps in.

Because Sass is compiled into CSS, it allows for great features like variables, operators, and even functions! Moreover, The Sass framework allows you to write D.R.Y. stylesheets. D.R.Y. stands for "Don't Repeat Yourself," and by introducing features normally found in programming languages, Sass helps reduce the amount you actually have to write while styling your sites.

Where can you use Sass?

The compiled results of Sass stylesheet can be used anywhere that normal CSS can be used, because it is normal CSS. In order to get the compiled results of a SCSS stylesheet, you need the Sass compiler.

The Sass compiler was originally written in the Ruby programming language, but thanks to the hard work of some talented individuals, Sass has been ported to a C/C++ library known as LibSass. The beauty of LibSass is that it not only speeds up the compilation of Sass stylesheets (estimated to be 4000x faster), but it also enables integration with many other programming languages through wrappers written in the target language. Want to use Sass with Node.js? No problem! Interested in using Sass with C? Easy! How about PHP? Yup! As you can see, Not only is Sass useful, but LibSass makes it incredibly portable and perfet for integrating with any of your projects.

How-To Overview

Section one of this guide will cover the setup process. We'll look at getting the Ruby version of Sass installed as well as the LibSass library up and running using the SassC command line wrapper. Additionally, we'll ensure that you've got everything you need to build and run a Node.js based web-server that uses Sass. If you're just interested in learning the basic syntax, you can skip this page alltogether.
Section two: will cover the basics of SCSS (Sassy CSS) syntax. Here's where the rubber meets the road. You'll learn about /* comments */, $variables, operators, nesting, and the rules for using them. When you finish this part of the how-to guide, you should be able to look use Sass to accomplish what you already know how to do with plain CSS more efficiently.
Section three will cover the intermediate aspects of the Sass language. The focus here will be on reusing your code and keeping your stylesheets DRY. You'll learn about dividing your code into partials and importing those partials into your files. You learn about the @extend operator and how styles can inherit from other styles. Then, you'll learn about the @mixin operator and how to create reusable rulesets that you can @include into your stylesheets. Finally, you'll learn a little about the @function operator and how to create your own functions.
Section four will take a look at using the Node-sass wrapper with LibSass. This is by no means a comprehensive tutorial on LibSass or Node-sass but is intended to illustrate one way that LibSass can add portability and extensability to vanilla Ruby based Sass.
Section five will provide links to additional resources you can use to go on and learn more about what Sass really has to offer. If you feel like you're getting stuck on some part of this tutorial, feel free to visit this page and search the available resources for an answer.

Prerequisites

This tutorial is designed for those who already have experience in HTML, CSS, and some programming (especially JavaScript for Section 4). If you don't know what the DOM is, consider doing some pre-learning before continuing with this course. If you've never heard of a "selector," or don't know what a function is, please check out some or all of the following resources:

HTML and CSS: HTML and CSS: Design and Build Websites, is a great book by John Ducket that should give you the basic and intermediate understanding that you'll need for this tutorial and more!
Eloquent JavaScript: Eloquent Javascript is a free book on JavaScript that should provide you not only with a basic understanding of programming, but also help propell you forward into further learning. It can be a little dry sometimes but all in all, is a great read!

Next: Setup