SCSS Mixin

SCSS Mixin lets you make a group of CSS declarations that you want to reuse throughout your website. A good use of mixin can be made for vendor prefixes.

Code Structure:
@mixin border-radius($value){
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  -ms-border-radius: $value;
  border-radius: $value;
}

.box{
  @include border-radius(5px);
}

Result:
.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

Share this

Related Posts