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.