Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="circle_one">asdf</div>
<div class="circle_two">asdf</div>
<div class="circle_three">asdf</div>

SassMeister-input.scss

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// ----

@mixin circle_one($size: 25px, $colour1: #4fade3, $colour2: #4fade3) {
    width: $size;
    height: $size;
    transform: rotate(20deg);
    border-radius: 100%;
    position: relative;
    display: inline-block;
    
    overflow: hidden;
    
    &:after, &:before {
        display: block;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        content: "";
    }
        
    &:before {
        left: 0;
        background: $colour1;
    }
    &:after {
        right: 0;
        background: $colour2;
    }
}
    
.circle_one {
    @include circle_one(40px, #4fade3, #222);
}

.circle_two {
    @include circle_one(40px, #654321, #123456);
}

.circle_three {
    @include circle_one(40px, #0f0, #ff0);
}

SassMeister-output.css

.circle_one {
  width: 40px;
  height: 40px;
  transform: rotate(20deg);
  border-radius: 100%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.circle_one:after, .circle_one:before {
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  content: "";
}
.circle_one:before {
  left: 0;
  background: #4fade3;
}
.circle_one:after {
  right: 0;
  background: #222;
}

.circle_two {
  width: 40px;
  height: 40px;
  transform: rotate(20deg);
  border-radius: 100%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.circle_two:after, .circle_two:before {
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  content: "";
}
.circle_two:before {
  left: 0;
  background: #654321;
}
.circle_two:after {
  right: 0;
  background: #123456;
}

.circle_three {
  width: 40px;
  height: 40px;
  transform: rotate(20deg);
  border-radius: 100%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.circle_three:after, .circle_three:before {
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  content: "";
}
.circle_three:before {
  left: 0;
  background: #0f0;
}
.circle_three:after {
  right: 0;
  background: #ff0;
}

SassMeister-rendered.html

<div class="circle_one">asdf</div>
<div class="circle_two">asdf</div>
<div class="circle_three">asdf</div>