mixins

$fontarial: arial;
$fontS14: 14px;
.xyz{
font-family:fontarial;
font-size:$fontS14;
}

//border-radius
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
}
//useage
.border{
@include border-radius(10px);
}
//placeholder
@mixin placeHolder{
    &::-webkit-input-placeholder {
       @content;
    }

    &:-moz-placeholder { /* Firefox 18- */
       @content;
    }

    &::-moz-placeholder {  /* Firefox 19+ */
       @content;
    }

    &:-ms-input-placeholder {  
       @content;
    }
}
//useage
.classname{
@include placeHolder(){
        color:$color-b3b2b2;
        font-family: $font-vrdna;
        font-size: 14px;
  };
}
//box-shadow
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {

      -webkit-box-shadow:$top $left $blur $color #{$inset};
      -moz-box-shadow:$top $left $blur $color #{$inset};
      box-shadow:$top $left $blur $color #{$inset};
  }
  //useage
  .test{
    @include box-shadow (2px, -2px, 13px, rgba(48, 48, 48, 0.6) ); 
    or
    @include box-shadow (2px, -2px, 13px, rgba(48, 48, 48, 0.6),inset );
  }
//extends
%tablecell{
    display: table-cell;
    vertical-align: top;
}
//usages
  .ds-dctr-leftsection{
       @extend %tablecell;
       vertical-align:middle;
    }
    .ds-dctr-rightsection{
        @extend %tablecell;
        width: 100px;
    }
//clear fix sass 
%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  &:before {
    content: "";
    display: table;
    clear: both;
  }
  //usages of clear fix
.wrap {
  @extend %clearfix;
}
.main-header {
  @extend %clearfix;
}