Time for explore beauty of SASS

Mixin beauty of SASS

Hi forks!! Few months ago I explored some new things about SASS. It awesome and I love it to share with you. Just Come with me, journey begins.

If you are very new what is mixin, here couple of example for you.

mixin borderRadisu($radius){
border-radius:($radius);
-wibkit-border-radius:($radius);
-moz-border-radius:($radius);
-ms-border-radius:($radius);
}

.button{
@include borderRadisu(3px);
color:#EEEEEE;
}

Output will be:

.box{
border-radius:3px;
-wibkit-border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
color:#EEEEEE;
}

So idea is very simple. Now you can use all prefix css as a mixin and use it all over your css file. You can save tone of time.

another idea is use one css class with different values again again...

@mixin heading($font-size,$color,$font-family,$margin) {
  font-size: $font-size;
  color: $color;
  font-family: $font-family;
  margin:$margin;
}

.heading{
  @include heading(10px,#343434,arial,0 auto);
}

or

Output will be:

.heading {
  font-size: 10px;
  color: #343434;
  font-family: arial;
  margin: 0 auto; }

or

h1{
  @include heading(10px,#343434,arial,0 auto);
}

Output will be:

h1{
font-size: 10px;
color: #343434;
font-family: arial;
margin: 0 auto;
}

Another example for you,

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

@include linx(white, blue, green, red);

Output will be:

a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Some useful link for mixin:

• Bourbon, It helps you how you can write mixin very effectively.
• Hongkiat, you see 11 readymate common mixins here. You just copy those and use your mixin file
• Cssowl, It is another open source mixin library.
• A list of mixin library, If you have enough time then go to this link here you can see some usefull mixin library that developer use lot.

What do you think... it is cool, right? Mixin is game changing idea. Now you can make coffee for your partner because mixin save your time.
Life is beautiful and ya, happy coding