What is SASS?

SASS compiler

No I am not talking about being sassy, I am talking about SASS or Systematically Awesome Style sheets, which is quickly being adopted as the new way to code your style sheets. Yes, there is now a kind of sort of quicker to code style sheets.

I would say this is definitely easier to set up if you are on a Mac, oh heck yes it is. If you are on Windows you will need to download the ruby command prompt and a few other things to get started…

But I am getting ahead of myself. SASS is basically a way to change many CSS elements at once. It use to be if you had a few style sheets you would code for that one and if you had to do a color change you would have to find and replace all those colors in the style sheet or sheets but with SASS, it’s simply you go to the main variable SASS sheet, change the main variable and it trickles down and compiles into one solid organized stylesheet.
Now what is this sorcery? Well it’s simple, let’s say you have the color blue, you call it in on a regular stylesheet via the hex code or the RGB. and if you wanted to change it you would have to find all instances and parent elements and hope you got them, well what if you wanted to use a different shade of blue? Well in SASS, you use something that looks like this

$blue

Now this is how you would use the color in the SASS styling pages. So if you said

a{

Color:$blue

}

SASS-ejemplo

It will output that blue as whatever the variable is set to for blue. Given you set up your compiler right. Now the important thing to note you can set up your main variables to be anything. You can set up font families even. So you don’t need to past in your usual listings of the font tree. Instead you would just call in the variable name you set.

So instead of…

font-family:Arial,Helvetica, serif;

You could simple do

Font-family:$arial;

Simple right? You can also set up size sets, width and height parameters. And much much more. I will be linking to a few resources down below if you wish to get started.

 

Sass Home Base

Responsive Type With SASS

The SASS Way

 

See you space cowboy…