Learning SCSS post image

Learning SCSS

Posted on:

When we first started using Sass in projects at work, the only thing I though was my god it’s a faff to set it all up. You need to install a whole bunch of software, have a command line program open all the time, write a gulp file. It took about 2 hours to get everything set up and all I was thinking was how much I could have coded already the old way.

I think this was mainly due to the guys at work not quite explaining everything that we were doing. It was a bit of a rush decision to start using Sass and I hadn’t done any research. Like installing ruby, node, gulp. I didn’t understand any of these and why they were needed on my computer and some of them again inside my project folder.

After doing my own bit of research, I realised that getting sass running is really not as complicated as we did it at work. I now have more of an understanding of why you need to install certain programs. The main thing to remember is, browsers can only read .css files. So if I’m writing in sass, then how do I convert it into CSS?

After trying different methods, I like using Gulp to convert my Sass files to css. What is Gulp? Gulp is a tool that can be used as a preprocessor for Sass converting it into CSS for use by the browser. For more info give this a read http://brandonclapp.com/what-is-gulp-js-and-why-use-it/

I learnt how to write scss (Sassy CSS) rather than sass mainly because it is less of a jump from writing css. You can find out the differences here http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax

My first setup for Gulp was using Ruby, which is something I know nothing about. After some research, I learned you don’t need to run it if your not going to be writing Sass.

I would recommend reading a few different tutorials, get the general overview of how Gulp and Sass work, then work on your own personal setup. Here are a few tutorials that I read –

What makes Sass so much more fun than just CSS then? Well for me, and probably a lot of people, it’s the speed. Being about to nest your code is so much faster. The use of variables too, for things like colour’s and font families is awesome. Being able to set something like a primary text colour and change it in one place affecting the who site is brilliant for ease of control. Having used it on one project, I now really like it and understand the setup much better. For a quick list of some of the main features of Sass take a look at this – http://sass-lang.com/guide