Bit of SASS - Part 2

CSS Preprocessor is new Pie in world of Web Development. And in my last post I started about a beautiful preprocessor named SASS. And this is another part after last post.

So , Lets get to the point.

There is some features in SASS like , mixin , with this mixin you can write down function like css snippet . Which can be used with argument or without it. Like,

//Mixin

@mixin color($color,$back-color){
	color:$color;
	background-color:$color;

}


//And to include it 

.some-style{
	@include color(#fff,#777);
} 	

Which will output,

.some-style{
	color:#fff;
	background-color:#777;
}

So , it is a charm isn’t it? And here is another smashing stuff you will love. You can use and manipulate css flow with control-statements like

@if
@while
@each
@for

Well , this can take your css works in to whole new level. Let me give a little example,

p{
	  @if 1 + 1 == 2 { border: 1px solid;  }
	  @if 5 < 3      { border: 2px dotted; }
	  @if null       { border: 3px double; }
  }

Output:

p{
  	  border: 1px solid; 
  	 }

Just try to imagin how much power is on your hand if you start to manipulate the CSS sheet with Control statements. Whole power is up to you .

Maybe next time I can talk about another CSS Preprossecor named LESS. Which is also fun to work with. Until then take care.

Mahabub Islam

Bit of SASS - Part 2