Sass mixins example

Sass Mixins:

A mixin is as like function you can give the name as you wish as: I have given “bordRadi” name. And I called using with @include “mixin name”.

@mixin bordRadi($radius) {

  -webkit-border-radius: $radius;

  -moz-border-radius: $radius;

    -ms-border-radius: $radius;

        border-radius: $radius;

}

.box { @include bordRadi(10px); border:1px solid #ddd; }

After Compiled code: 

.box {

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -ms-border-radius: 10px;

  border-radius: 10px;

  border: 1px solid #ddd; }