[scss] rounded mixin

https://jsfiddle.net/ohz0fpu1/

scss:

@mixin rounded($amount: 10px, $position: null) {
  @if $position == null {
    border-radius: $amount;
  } @else {
    @if $position == "top" or $position == "bottom" {
      border-#{$position}-left-radius: $amount;
      border-#{$position}-right-radius: $amount;

    } @else {
      border-#{$position}-radius: $amount;
    }
  }
}

.a {
  width: 30px;
  height: 30px;
  background-color: pink;
  margin-bottom: 10px;
}

.a1{
  @include rounded(); /*as default 10px on all corners*/
}
.a2{
  @include rounded(15px); /*all corners*/
}
.a3{
  @include rounded(15px, top); /*all top corners*/
}
.a4 {
  @include rounded(15px, bottom); /* all bottom corners*/
}
.a5{
  @include rounded(15px, top-right); /*this corner only*/
 }
 .a6 {
  @include rounded(15px, top-left); /*this corner only*/
 }
 .a7{
   @include rounded(15px, bottom-right); /*this corner only*/
  }
 .a8 {
  @include rounded(15px, bottom-left); /*this corner only*/
 }


-----------------------------------------------
html:

<div class="a a1"></div>
<div class="a a2"></div>
<div class="a a3"></div>
<div class="a a4">a</div>
<div class="a a5"></div>
<div class="a a6"></div>
<div class="a a7"></div>
<div class="a a8"></div>