A CodePen by Bermon Painter. Mixin - Simple

index.html

<h1>Mixin - Simple</h1>
<p>A great use for a mixin is to take redundant CSS3 with multiple vendor prefixes and create a snippet of CSS rules that can be reused.</p>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

style.scss

@import "compass";
h1 {
  font-size: 20px; 
}

.box {
  display: inline-block;
  height: 100px;
  margin: 0 10px;
  width: 100px;
}

.box {
  background-color: #999;
   background-color: #999;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}

@mixin rounded-corners($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

.box + .box {
  background-color: #666;
  @include rounded-corners(10px);
}

.box + .box + .box {
  background-color: #333;
  @include rounded-corners(50px);
}