Bit of SASS

Written by Mahabub I.

We are living in a age of wonders. How can you tell? Well in few years back developers had to take a lot of pain to make a good piece of CSS. Now they have some pre-processors , new designs and new way of doing works.

So , a preprocessor. Sass is kind of one. By this time some of you may ask “Why the use of a preprocessor needed? ( In british accent )”.

I would say , The style sheets are not that little tiny peice of works anymore. Its even a lot more complex with new features. Here preprocessors comes to save your day.

SASS is a beautiful preprocessor . Right now the stable release is Selective Steve (3.4.10) More on this , Follow along,

Getting Sass:

Its easy, if you have Ruby installed in your computer, Then you can install it with gem installer. Like,

$ gem install sass

Check after installation ,

$ sass --version

And it should be there showing the glorius version .

Diving and learning to swim:

Ahem ! I want to be in safe side , so listen everyone, we have two kinds of working styles in this SASS.

We are going to see the SCSS way , why ? because it is easy.

First thing first , The variable. It always as a regular variable of programming languages , for more easier concept its just like a Javascript variable for holding Data.Example,

$font-color : #000 ;
$background-color: #fff ;
$font-size: 1em ;

So , SCSS use $ in front of a variable name . And that is easy as pie.

Now it does come to the power of Nesting up the styles, With this nesting you can make perfect tree structure of styles.Example:

.class{

	.class-a{
		font-family: $font-family-a ;
	}
	.class-b{
		font-family: $font-family-b ;
	}

	font-size: $font-size-default ;
	color: $font-color-default ;

}

Easy and convenient , Right ? Now I give you permission to laugh with joy.

Another fun with SASS , It supports the Partial system. Just by naming something as in this _partial format , you can write down small snippet of style sheet. Which as collectively can be used in a single style sheet , by using @importkeyword. Example:

@import 'partial' ;  # where it is _partial

.class{
	color: $color ;
	padding: $padding ;
}

I am quite tired now , talking about all these stuff. But a lot more features still is in store. I think , it would be better If we talk about it in another article.

Yes , it will be so. Take care .

Written by : Mahabub Islam

Done At: Jan 23,2015
Categories: