Lets get Sassy with SASS

Now what the heck is SASS?

Well as some may know, websites are usually made up of 2 main types of code; HTML and CSS. These types of code are like writing in a different language. Let’s say HTML is German and CSS is English, SASS would be American English, almost the same but a little bit off.

Let’s get technical

SASS or SCSS (Sassy CSS) is a library built in Ruby. It works as an extension or rethinking of CSS. It allows you to create things faster and cleaner than with conventional CSS. SASS contains powerful tools to create dynamic and beautiful websites with functions and variables. Exciting isn’t it? I always love a new toy to play with so let’s get into it.

What’s so good about SASS

There are 4 great things about SASS I’m going to talk about. Nesting, Variables, Extending and Mixins. I will go through each of these and how you can use them for your website. There will be an example on each of them to help illustrate how useful they are and some situations where SASS can help make your life easier.

1. Nesting

Nesting in SASS makes CSS really easy to read and write.  Say you are making a navigation bar.

Instead of mentioning “nav” in front of every element in the navigation bar, you mention the selector inside the navbar. This means that your SASS “nav” styles will look very much like your actual HTML code, making reading and editing CSS a lot easier because all of the related elements are together. Here is an example of using nesting in a navigation bar element.

Example of nesting

The example has a <nav> with an <li> and <a> inside which is styled using nesting; while the <li> and <a> outside the <nav> are not styled at all. Have a play with it yourself!

2. Variables and using that data

Variables are useful when creating any site. There are many ways to use variables; one way is to use them of colour names for easy recall, another way is to create flowing grids based on a single variable. Using variables with simple equations you can create dynamic margins and fantastic grid solutions.

Example of Variables

In this example I have set the width of the <div> as a variable and used that data to set the width of the <a> tag.

I have created a media query and changed the width variable, using the same CSS on the <a> it is now half the new width variable as the media query.

3. Extending

This is hugely useful when creating UI elements on a website as well as much more. As an example I have created a button. I defined the button once and then extended it to include different elements at different points in the build. There are many uses for extending styles like margin and padding. I love using it because it lowers the amount of classes you need to apply styles.

Example of Extending

This example shows how to create easily reusable elements without the use of classes and applies to different sections of the example.

4. Mixins

This is where the real action is in SASS. Mixins allow you to make functions that will in-turn make the styles for you. This is great because it allows you to reuse CSS and gives you massive customisable power over your styles.

Example of Mixins

In my example I created a mixin called “navbar” with 2 variables; the width of the navigation bar and the number of items in the navbar. The mixin then sets the width of each item to the correct division of the navbars width.

The possibilities are almost limitless with what you can create with the use of all of these features combined.

This article only scratches the surface of what SASS is and what you can do with it. If you are interested in getting into SASS, http://sass-lang.com/ is a fantastic research tool but I think once you have the basics, the best way to learn is by playing around yourself. All the examples are editable if you would like to test it out for yourself.

My final thoughts are SASS is great and is gaining more popularity every day; I would start learning now before you get left behind. The guys at A List Apart have another awesome post on SASS, give it a read!

If you have more examples and reasons why SASS is so awesome share them with us! Get in touch with Media Heroes to tell us your thoughts and ideas.