Beginner’s guide to Sass

and why Sass?

CSS is evolving steadily. One of the biggest milestone to prove it is ‘variables’ in CSS. But still, bothersome works to do are exist. Try to imagine you have to write some sets of different multiple styles in your stylesheet. Even if you created some special classes for specific styles, CSS still doesn’t offer the way to ‘override’ them. Moreover, what if you want to fix or replace some value in your stylesheet?

With Sass, you can override style or value. Also, replacing just one value in one place can make change on entire stylesheet, which we can’t do with ‘variables’ in CSS.

Installation

Windows

Before you start off, just make sure that you’ve installed Ruby on your computer. If you don’t have Ruby, and you’re using Windows, get RubyInstaller before install Sass(Sass needs Ruby to be compiled).

Mac

If you’re using Mac, you don’t need to install Ruby, because it comes pre-installed.

Install Sass

After you've installed Ruby on your computer, open your Terminal(Mac) or cmd(Windows) to install Sass with command line below.

cmd:

gem install sass

Terminal:

sudo gem install sass

Double check(will return current version of Sass):

sass -v

Preprocessing

How to start with?

Before we get started, we need 2 kinds of stylesheet for this tutorial — one is ‘.css’ and the other one is ‘.scss’. In this example, we’re going to name them as ‘style.css’ and ‘style.scss’. Each stylesheets are in folder named ‘app’. Write following command line in your Terminal or cmd.

sass --watch app/style.scss:app/style.css

With sass command, we can compile Sass to CSS. With the command line above, Input(app/style.scss) will compiled to output(app/style.css). In this way, Sass will watch app/style.scss for the changes, and compile it automatically to app/style.css. Now we have everything to start off.

Examples

Variables

In Sass, we can store value in variables($) and reuse it throughout your entire stylesheet. Following code snippet is some examples of variables in Sass.

will be compiled like:

Mixins

Mixin is one of my favorites in Sass. Bothersome works like making vendor prefixes for each styles in need are quite tedious. With @mixin, we can make it easier and do it faster without writing each vendor prefixes one by one. I’ll show you how I used it with opacity.

Like the code snippet above, we can pass values with $ to make it more flexible.

will be compiled like:

Functions

We can use @function in Sass. I used function to convert px to rem(or rem to px) on example below. When we’re using rem, we must prepare fallback option for it because rem is not supported in older IE browsers. So I wrote code for both px and rem. When browser can execute rem units, it’ll use rem units, and if not, it will use px units as a fallback option. Moreover, We can use operators like +, -, *, / and % in Sass like below.

will be compiled like:

Nesting

With Sass, we can write CSS nested like HTML. In this way, we can make our CSS code to have more clear visual hierarchy. It’s more readable, organized and clear.

will be compiled like:

Takeaway

I hope you enjoyed my short tutorial about Sass. Sass can make our CSS code easy to maintenance, more readable and reduce tedious works. You can check my GitHub repository if you want to see how I used Gulp for my design portfolio website. If you want to contact me, visit my LinkedIn or just send me an Email to ghsspower@gmail.com. Thanks!