In the previous post, we have learned how to install Sass on windows in simple steps. This is a very basic Sass tutorial for beginners on how to startup.

A short description about Sass

Sass is really Syntactically Awesome Stylesheet. Its fun to code, easy to implement, fast and efficient. It contains variables, nesting, mixin etc. which allow designers to keep CSS clean and DRY.

For example, we can create a variable something like $fonts: sans-serif  and call $fonts anywhere we need sans-serif font in the document. Further, we can create set of properties which are repetitive using mixin and call it using @include name_of_mixin.

There is a lot of stuff on the web which is enough to explain why you should use Sass or any other preprocessor like Less, stylus etc..

Assuming you have created the folder in wamp/xamp and named the folder “learning-sass “. Create CSS folder inside the directory. Then create a simple file with extension .scss . ie; style.scss using any text editor.

That’s it. You are ready to write Sass.

Open style.scss in your favourite text editor. 

Let’s write it.

$default-text-color:#555; // defined text color
$width:200px; // defined width and
$height:280px; // defined height

.box {
    width: $width/2;
    height: $height;
    color: $default-text-color;
}

We need to compile it before we can use it in our pages as CSS.
To compile style.scss using Command Prompt type-

sass style.scss style.css

The above command will compile the style.scss file into style.css which we can use on our web pages.

Now go to wamp/xamp and create index.html file inside the folder ‘learning-sass’ if you have not created yet.

Well, It’s irritating and time-consuming to compile our style.scss file every time we modify it.
So, we use Command Prompt which keeps watching if any changes are made in style.scss file and automatically compile it and update style.css accordingly.

To do this we use this Command in Command Prompt

sass --watch style.scss:style.css

Now, whenever we modify or edit style.scss our style.css get updated as well.Sometimes we may need to convert our style.css file of any old project into style.scss.

To do this we write this command

sass-convert style.css style.sass // to .sass
sass-convert style.css style.scss // to .scss

Normally it is advisable that code should be clean and readable. But when creating a big project where thousands of lines of CSS rulesare written, page load time may increase.  So, it is good practice that final output code is minified so it takes less load time and speed up load time.

So, Sass has four options for this and it is completely up to you which one is best suited to you. Below are the options - nested, expanded, compact and compressed.

Again in the Command Prompt

sass --watch style.scss:style.css –style [nested | expanded | compact | compressed]

If you have any issue, let us know in the comment box.