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.