Select Page

So now that you’ve finally decided to learn some Sass basics, and finally took a bold step forward in digging out my site, let’s first introduce you to what Sass is and all it’s goodies.

SASS – Syntactically Awesome Style Sheets

Yeah. Mouthful. And first time I read it was “synthetically” style sheets. My bad, I guess. Basically, Sass is a preprocessor that introduced so much goodies to the plain ol’ CSS, that I’m pretty sure I’m never going back. Basically it’s to the CSS what Typescript Coffeescript (Kudos to Redditor Myrad for correcting me here) is to JavaScript. Sort of. All right, let’s get down to it.

I am gonna list and explain most of what it does here, and then we’ll move on to individual “lessons” that’ll go in depth and explain everything.
So, here’s what Sass brings to the table:

  1. Introduction
  2. Preprocessing
  3. Variables
  4. Nesting
  5. Partials
  6. Imports
  7. Mixins
  8. Inheritance
  9. Operators

Introduction

Sass logo

The Sass in it’s basic form is in my honest opinion confusing.

Sass has two different syntax, so to speak. Original (Sass) was brought into existence back in 2006, Hampton Catlin, and just like his other project (HAML) was built for Ruby on Rails, so was Sass. Basically, they both shared the same syntax that didn’t include any brackets. Kinda confusing when you look at CSS, really. Here’s an example:

I had experience with HAML, YAML, Stylus and other similar syntax, so this was not really too confusing, but still, when we came down to operators, mixins, all that didn’t really float my boat anymore. And it was a little hard for me to get used to, as I didn’t have to use ; to end the code anymore! Then came Sass version 3, and SCSS syntax was introduced, which is pretty much just extension to CSS, bringing in all the power of Sass to it! Literally, everything you write in CSS is a valid SCSS as well! Obligatory example:

See? Just like CSS. All righty, moving on.

Preprocessing

This is the gist of it. CSS on it’s own is interesting, but as your stylesheets are getting piled up and fat with monstrous code… You need a way to whip monstrous code into shape, right? Sass allows you to use a lot of features (see the list a bit above? Everything under point 2). Of course, in order for it to actually work, you need to install Ruby on your machine, or if you’re into GUI Sass compilers, Koala (Windows, Linux and Mac supported) is excellent and totally free. You can also go through my Gulp tutorials and setup a nice tooling chain to get you up and running in no time!

In our examples here, we won’t get much into the gulp (as I have it explained already), we’ll go Ruby-way here. Here’s a nice guide on how to install Ruby on your machine.

Cool! Off to those Sass basics! In the individual tuts that are coming I’m gonna explain how to setup Ruby to process Sass. 🙂

Variables

Variables in Sass are quite the same thing as in any other languages… They store info to use later on in different functions. In these reusable variables you can store anything, really, like other CSS values, colors, font stacks and so on. We use $ here to declare a variable (if you are familiar with PHP, you’re right at your home!). Example:

Once Sass is processed, the variables will resolve in exactly this:

One important note to take here is that variables won’t be processed into the actual code. The $primary-font and $body-background are just for your Sassy usage.

nesting

This is my crush. This is that gal I wanted to take home after every night out. First, let’s have a look real quick at HTML. If you open up developer tools in any page, you’ll see a well structured code, nicely indented, you can pretty much see an ordered hierarchy of elements and easily distinguish which “child” elements belong to which “parent” elements. CSS is flat. Really, it is. Not like my type of girls.

Let’s have a look at the example of nesting:

Now those are the curves I like! (laugh, please, this is the best joke I have for tonight) Keep note tho: Folks recommend not to go wild on this feature. If it’s 4 steps in, that’s plenty. Time to rethink what your doing.

All this nice and fancy nesting will result in the end code like this:

Isn’t that what we write for every single project? That very code? :p

Partials

CSS already has a way of importing other stylesheets. Only problem is, every time you do this, you will have your server make another HTTP request. Not great for page speed reviews, right? Well, sass has a same feature, @import, which will pull in the _partial.scss files (note the _) and combine all that nice code into the code where you made the import call and then process it into a single stylesheet. Better!

Say you have a partial with variables, or reset, or any other piece of code. Let’s go with reset example!

Now let’s pull it in!

The resulting, processed and refined single CSS file will look like this:

Mixins

Imagine JavaScript functions. It looks like this, right?

Now, Sass mixins allow you to do the exact same thing: take a piece of “functionality” or “style” and use it elsewhere. This saves countless hours on repetition and copy/paste work. Imagine you have 10 different buttons, but they all have border-radius property set? In case you didn’t know, if you wanna go full-browser compatibility, you gotta add up -webkit, -moz, -ms and ocassionally -o (blaaaaaah) in front of some properties. Like border radius! Let’s save time by introducing mixins!

So by saying @mixins and then later on “calling that function” with @include we can save a lot of space in our editor, right?

Inheritance

This is exactly what it means. Other classes (or IDs, mind you) can extend FULLY another class. This is extremely useful on – again – buttons! For example, let’s say you have an array of buttons in your arsenal, for different occasions, of course. Example (continued from previous):

Last but not the least:

Operators

Math in CSS… witchcraft? In Sass, quite all right and finally welcomed!  Sass has a handful of standard math operators like +, -, *, /, and % ! Very useful for setting widths, for example. Let’s say you have a 1200px wide container. You’d wanna split it into percentage parts for it’s child elements, right?

This is your very first grid, believe it or not. 🙂

sass basics – explained

This is pretty much an overlay of what Sass basics are. I will be adding up individual/partial tutorials on all the stuff explained here soon, my tempo is just 2 (maybe 3) tuts a week, so stay tuned and we’ll learn quite some more of SASS – SYNTACTICALLY AWESOME STYLE SHEETS!

Share This