Before we start learning SASS, if you are completely new to CSS, I would recommend you to have a quick reading on our CSS and CSS3 tutorial to give you an idea on how to use basic CSS.

So what is actually SASS?

SASS is a css preprocessor helps styling your site more structurally by defining css variables that are used to re-generate your css files so they can be easily changed and maintained.

Why it is a great choice to have SASS for your site?

One of the big advantage to have SASS is it makes your CSS codes more maintainable and it automatically regenerate css codes for you when there are changes made on your sass file. Therefore you can write your CSS faster.

How to decide when to use SASS?

Well if you have a really simple site and contains only couple pages, you might not need to use SASS. But if you do have site require complex css stylesheet, it would be a good decision to start using SASS, as it will be definitely easier to maintain.

What is the requirement of SASS?

You will need to install Ruby on your site development in order to run SASS. It is pretty straight forward. You will also need to learn on how to use command prompt to run this extension.

Before we going further into some example of the programming codes. I will show on how to install Ruby on your local development PC or laptop.

How to install SASS on Windows?

You will need to go to the following site and download the Ruby installer for window.

http://rubyinstaller.org/downloads/

Once the setup file has already been downloaded, double click the file to start installation.

There are optional items you can install, I would recommend you tick the Ruby Executables to your path. This would be helpful later on when we run the Ruby extension in command prompt. The rest options can be unchecked if you want.

Once the installation completed, we will then need to install Sass via command prompt. Go to your command prompt by entering cmd in the windows search box. A command prompt with black box icon should be displayed. Just double click this icon to popup command prompt box.

Type in the following code to install the Sass.

gem install sass

You should see once the Sass has been installed completedly like above image.

Your first Sass sample file

The Sass file will have .scss extension. The next thing we need to do is to create our first sass file. You can create a txt file name sample.txt and rename it to sample.scss file. Once it has been renamed, we need to run the following script in the command prompt. Please make sure you navigate to the correct folder of where you save your scss file. You can see the example below where I save the folder into specific folder.

sass --watch sample.scss:sample.css

The above code will tell the Ruby program that we want to watch the sample.scss file and if there are any changes being made into this file, the Ruby program will automatically generate a sample.css file. In this particular example, you can have different name, so it will not always be sample.css, it will be just easier for you to manage which css file has already been automatically generated by Sass.

Let's write our first Sass example code. We declare our 3 single variables that only contains one single value. While the @mixin type will have more than one css properties.

$red: #fc4108;
$grey: #ccc;
$size10: 	10px;

@mixin box{
	border:solid 1px $grey;
	padding: $size10;
}

.contact-form {
    @include box;
    background: $red;
}

Once you start typing those codes into sample.scss file, you will notice in the command prompt it will says changes detected and you will also notice there is a new file called sample.css, it will translate the sass code into the following code.

.contact-form {
  border: solid 1px #ccc;
  padding: 10px;
  background: #fc4108; 
}

Pretty amazing write? So I hope this basic tutorial introduction should help you organize your css files much better.