Sass tutorial for beginners

Preferring SASS over the default or old way of editing CSS is really an improvement on your workflow in my opinion. Sass indeed makes using CSS fun again, but more importantly it’s an easy syntax that once you get used to it, it really is cleaner, better and has a lot of helper functions. Defining variables, mixins and adding more functionality also structures your css code.

There are 2 different syntaxes and I recommend starting with the .scss style, which looks a lot like the regular

css style where you use semicolons and the curly braces. Then after you are familiar with this new way of generating css, you definitely need to try the other (older) .sass syntax.

It takes some time to get used to but when you do, it’s really is a lot cleaner and better to read.

So why not start with Sass! Make sure that you have ruby installed on your machine (only for Windows and Linux), because for Mac it is pre-installed.

On windows install by opening CMD and type:

On a Mac its basically the same, but you need to use sudo and provide a password for installing:

Go to your desktop or use a test folder and create a project using:

This creates a test folder and gives you a basic setup and a “config.rb” configuration file where the path’s for Sass, images and your Css directory is.

Additionally you can set the preferred way of css output and I would recommend to uncomment the line_comments and setting it to true while in development.

Now your done setting up the project, there is a choice you need to make regarding how to compile you Sass to CSS. You could use the command line way by going into the directory and typing:

However using an app that does that for you is my preferred way of doing it. I use Codekit but there are a lot more of them around; like Scout, Fire, Compass and Koala

While this project uses Sass as its preferred syntax, you can use scss as well by just defining stylesheet.scss in the sass folder. Meaning you can use more syntax combinations, when teaming with someone that prefers the other. I’ll show you the differences and let you decide which one to use.

One warning ahead; Pay attention to the indentation of your syntax, especially when copying and pasting from here. The compiler could complain when there are differences between tabs and / or spaces and you could get an error.

You can split your code into partials and split up your code into one bigger stylesheet. For example you could have a filename in you project called ‘_mixins.sass’ or ‘_mixins.scss’, where you can store all mixins, functions, variables and so on.

Then in the main stylesheet your using, you can import it by using:

<pre>@import “mixins”</pre>

This way you can maintain smaller sets of code and compile them into one big sheet. The order however does matter here. It is also the way to import specific parts of compass for helper utilities. See Compass for more information at the bottom.

A simple example:

.scss syntax
.sass syntax
Both styles will generate:
Extending classes or use placeholder:

Here we are using a placeholder by the % sign and also extend a classname called bold.

This produces:

The same result in sass syntax:

Which generates:

Using Variables:

You can use variables by defining them as:

Using lists / loops:
Let’s say you have a container div that has four div’s inside and shares names with border type. You could generate this using a for loop in combination with a loop.

This generates:

These are just a few examples and I just wanted to show you some examples of using Sass because theres a lot more. Compass for example has a lot of plugins or helpers to really get the most out of Sass/Compass. Just take a look at Sass documentation and Compass docs.

One example of generating a border radius by using compass is first import compass.
This generates:
Usefull links:

Want more..?

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">