Practice SASS now!

I have been using SASS (http://sass-lang.com/) since last week and found love with it.
so what is SASS exactly that people are talking about on the web, basically it allows you to write your css in variables, functions, nesting for better visual and save your time on complex css, then it compile the file into standard CSS.
As what their website said:

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

inorder to install this little brilliant tool open your terminal and key in

1
gem install sass

for those with permission error with gem/ruby might want to use

1
sudo gem install sass

There are a few key functions that i really like it alot which I will demonstrate here.

Nesting and variables, these are 2 simple but useful way of writing css, imaging that you have define a color, example “#25c5e7″ for most a few different divs, headers, footers, and one day you or your client decided to change the color, normally you will need to dig out all the class that contains this color then change it. However with variables its all dynamic, you do it once for all.
Below is an example of how you a variable.

1
2
3
4
5
6
7
$blue = #25c5e7; //change the color once for all and yes its awesome i can use one line comment here.

div.a { background:$blue; }
div.b { background:$blue; }
div.c { background:$blue; }
div.#e { background:$blue; }
div.#f { background:$blue; }

so now here how you can use the nesting which give you better readability on your coding.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.a {
// your parent div

background:white; // add some code here

div.b {
//child of div a
background:green;

div.c {
// child of div b
background:red;
}
}
}

here is the outcome.

1
2
3
div.a {background:white;}
div.a div.b {background:green;}
div.a div.b div.c {background:red;}

now we have learn the nesting and variable, here is another extension that i really like it alot, which is call mixin
Mixin works like function and use it whenever you want once for all. Here is an example
first you define a function using

1
2
3
@mixin functionName{

}

then you include this function to a css element

1
2
3
div.a {
@include functionName; // whatever inside that @mixin which i call it function will be output in this div.
}

@mixin also allow you to define an argument so you can save it for later use.

1
2
3
@mixin functionName ($argument){
width:$argument;
}

//again include this function with any argument you want now.

1
2
3
4
div.a {
@include functionName(960px);
}
}

isn’t that wonderful? there are more things you can do with SASS, head over to their documentation website to read further if you want to dive deeper.

So thats what you can do with SASS, now I am going tell you how you do it.

After you install the SASS, create a new folder and add a text file and save it as anyName.scss.
Open your terminal in Mac, sorry for pc user, I am not sure if there is a terminal.

type: cd “your folder location” *Note that your folder location you can drag the folder into the terminal and click enter/return.
now you want to start the sass by copying this code into your terminal

1
sass --watch anyName.scss:anyName.css --style compressed

so when you are coding in your anyName.scss whenever you click save it will start to compile this file into anyName.css with minified version. There are a few other compile version such as nested, expanded, compact, compressed.
Again I want to thanks the creator of this extension and if you are not familiar with terminal or hate it, there are lots of ready tools that will help you are developer to get your job done easily.
here are two application that i really appreciated:

 

[button link="http://incident57.com/codekit/" size="medium" target="self"]CodeKit[/button]

[button link="http://livereload.com/" size="medium" target="self"]LiveReload[/button]