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 color($color,$back-color){


//And to include it

@include color(#fff,#777);

Which will output,


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,

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


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.