Getting into Sass (SCSS)

By Kieran Hunter

Sass is an advanced type of the CSS coding language. It's a word to describe the language as a whole, but it has two forms of syntaxes, Sass and SCSS. They are both similar, but Sass is a kind of short hand version, like Haml for html, whereas SCSS looks more similar to the standard CSS. Here when I'm talking about Sass, I mean the SCSS syntax.

The thing that initially stopped me from drifting over from standard CSS to Sass was all this preprocessing talk. I mean, why should something as simple as CSS need anything that sounds so complicated for it to work? I have my stylesheet and that's all I need, right?

Preprocessing is basically done by a program in the background, and it takes the .scss stylesheet and turns it into .css automatically. Not only that, it can minify it at the same time, as well as adding prefixes to support all browsers and a lot of other cool stuff, but for now im just talking about the basics.

For me, learning the basics of Sass and how the language worked took a matter of 10 minutes. A preprocessing program called Koala was a big help in setting up, it made it so simple, and works on both Windows and Mac.

Let's say you have a project, you simply add it using the big plus button, and it will turn your .scss stylesheet into standard CSS and it will minify it. Even if all you use it for is to minify, I think it's worth doing as minified files load a lot quicker. It reads your files and there a few tick boxes that allow you control what the programs doing to each file. For example whether you want the processed .css file minified or not.

Learning the basics of Sass was pretty easy too, I suggest you build a really simple test project containing a stylesheet and an index file and learn the aspects that separate Sass from CSS. The best place for me was the SASS website guide.

For now im only using the basics, theres no point in using something new if it's not speeding up your workflow. I suggest at least looking into Sass, rather than dismissing it.

Leave a comment