Select Page
Beginner’s Guide To Sass – Preprocessing

Beginner’s Guide To Sass – Preprocessing

Sass is a preprocessing language. Means – it needs tools to make it work. Imagine there as a middleman who’ll take no share whatsoever. Even as a bonus it can do some more stuff to help you out!

by performing preprocessing, think of code compiling

You need a compiler to do it, and in the case of the following lecture, we’ll roll out with the original, the first of it all – Ruby. If you wanna set up a Sass preprocessing tooling chain with Gulp, I’ve got you covered right here, too.

I’ve opted up for Ruby in this series because it’s the one universal tool you can use to very easily setup everything and it takes just a few clicks. And it all started here, too.

Mac

If you’re on Mac – congrats. Ruby comes preinstalled. The only thing you gotta do is install the Sass gem.

Please note that if something fails, you should try with sudo command. Easiest Sass installment of it all. 🙂 Go ahead and check it out with sass -v.

Linux

Many distros already come with Ruby packed in. Give it a go by typing in the terminal: ruby -v. If you don’t have Ruby installed:

If you have it already up and running, check for Sass as well by typing
sass -v. If you get a version number, you’re good. Otherwise:

Windows

Getting Ruby on Win machine can be a bit tricky, as you’d have to setup environmental variables and edit path yourself and stuff. Easiest thing to do is to get the latest installer here and let Windows take care of all of that.

Once completed, you can check it out by opening up your CMD (easiest – click on windows key, type cmd and click enter) and type:

You should be all good to go at this point. However, one more thing, since my days on development under Windows’ harsh jurisdiction has been painful, I strongly recommend you to get Git Bash. Windows is not really so optimized for development and for coding like Linux or Mac, so you’ll need all the help you can get. 🙂

Start of the journey

All righty! You’re all set! One last thing to consider is – in case you don’t wanna use terminal and command-line inputs to start off preprocessing, you can use Koala GUI interface to run tasks. I’m hoping you’re hardcore like I am, and I hope you’ll be typing out stuff before defaulting to GUI clients… Takes up more RAM, in all honesty. 🙂

Step 1:

Choose your editor

There’s a whole arsenal of editors and IDEs (Integrated Development Environments) you can use. I use Atom. Atom is good. Atom is love. Others I’d recommend are Sublime and Brackets. If you’re really into the world of pain, you can use Vim. Extremely high learning curve, tho.

Step 2:

Organize your folders before you start

This is quite important point that most of the developers don’t give enough attention to. I usually work from Laravel (that’s my weapon of choice for server-side framework) and it comes out with serious boilerplate already shoved in, so I don’t have to think too much about folder structure. But if you’re starting from scratch and building things on your own (like we’ll be doing here), then let’s make a plan. Here’s the folder structure:

Aaaaaand let’s keep it like this for now. Create your experiment folder and dig in, open up the editor and create those folders. I’ll wait here.

Step 3:

Running the preprocessing watcher in sass

Now – you’re ready to embrace this journey. Let’s put some content first into the main.scss file:

The indentation that you see here is valid SCSS code. Don’t worry about it. We’ll cover it pretty soon.It’s here just so we know we did in fact hit the ground running. Let’s add up some basic boilerplate for our app/index.html file:

Now, if you’re in a root folder of your lil’ project, you can run following command from the terminal/bask/cmd:

What this’ll do is it’ll start the Sass job, --watch for changes in the sass/main.scss file and output it in the app/css/main.css file! If you open up the index.html file right now in your browser (just double click on it), you’ll see a compelling, moral boosting message to get you started with a nice dark green background and white text font.

woo hoo! all done!

Believe it or not, you just setup your first Sass job using Ruby compiler! You can set up a style of the output by appending --style compressed at the end of the sass command line, you can make it lose all the space it can and output it all on a single line:

All the styles you can:

  1. nested
  2. compact
  3. expanded
  4. compressed

You can turn off warnings with --quiet flag. You can watch multiple files but load only a single file with something like this:

There are tools like Compass, Gulp and a full arsenal of others that can help this look a lot more better… but since we’re starting… we start of from the ground up!

That’s all folks, I’ll see you soon with more, and next stop will be Sass variables!