<div class="content">
  <div data="checkbox-switch">
    <input type="checkbox" id="switch" />
    <label for="switch"></label>
  </div>
 </div>

html,body{
  position:relative;
  width:100%;
  height:100%;
  background:#efefef;
}
.content{
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:50%;
  transform: translate(-50%, -50%);
  margin:auto;
  background: #fff;
  &>div{ 
    position:absolute;
    left:0;right:0;bottom:0;top:0;
    margin: auto; 
  }
}
// 元件寬、元件高，元件鈕邊框寬，元件off顏色，元件on顏色
@mixin checkbox-switch( $w, $h, $border_w, $bg_default, $bg_cover ){
  position:relative;
  width: $w;
  height: $h;
  input[type="checkbox"]{
    opacity: 0;
    & ~ label{
      position:absolute;
      left:0;
      top:0;
      width: 100%;
      height: 100%;
      background: $bg_default;
      border-radius: $h;
      cursor: pointer;
      transition: all 0.3s;
      &:after{
        content:'';
        position:absolute;
        top:0; left:0px;
        width: $h - $border_w * 2;
        height: $h - $border_w * 2;
        border-radius: 50%;
        border: $border_w solid $bg_default;
        background-color: #fff;
        transition: all 0.3s;
      }
    }
    &:checked ~ label{
      background:$bg_cover;
      &:after{
        left: $w - $h;
        border-color: $bg_cover;
      }
    }
  }
}

// 直接使用!!
[data='checkbox-switch']{
  @include checkbox-switch( 60px, 30px, 2px, #ccc, #159 );
}