Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>
  
  <label class="c-switch">
    <input type="checkbox" class="c-switch__checkbox" />
    <span class="c-switch__on"></span>
    <span class="c-switch__off"></span>
  </label>

</p>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$switch-base-color: #09f;
$switch-base-inner-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.075);

.c-switch {
  font: menu;
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
  width: 5em;
  cursor: pointer;
  background-color: $switch-base-color;
  color: #fff;
  border-radius: 5px;
  letter-spacing: 0.075em;
  box-shadow: $switch-base-inner-shadow inset;
  position: relative;
}

  .c-switch__on,
  .c-switch__off {
    display: inline-block;
    width: 3em;
    padding: 0.2em;
    border-radius: 5px;
    text-align: center;
    border: 1px solid transparent;
  }
  
  .c-switch__on {
    display: none;
    float: right;
    background-color: lighten($switch-base-color, 20%);
    box-shadow: $switch-base-inner-shadow;

    &:after {
      content: "ON";
    }

  }
  
  .c-switch__off {
    float: left;
    background-color: darken($switch-base-color, 20%);
    box-shadow: $switch-base-inner-shadow inset;

    &:after {
      content: "OFF";
    }

  }

.c-switch__checkbox {
  opacity: 0;
  position: absolute;
  top:    0;
  right:  0;
  bottom: 0;
  left:   0;

  &:focus {

    ~ .c-switch__on {
      box-shadow: $switch-base-inner-shadow,
                  0 0 5px darken($switch-base-color, 10%);
    }

    ~ .c-switch__off {
      box-shadow: $switch-base-inner-shadow inset,
                  0 0 5px darken($switch-base-color, 10%);
    }

  }

  &:checked {

    ~ .c-switch__on {
      display: inline-block;
    }
  
    ~ .c-switch__off {
      display: none;
    }
  
  }
}

SassMeister-output.css

.c-switch {
  font: menu;
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
  width: 5em;
  cursor: pointer;
  background-color: #09f;
  color: #fff;
  border-radius: 5px;
  letter-spacing: 0.075em;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.075) inset;
  position: relative;
}

.c-switch__on,
.c-switch__off {
  display: inline-block;
  width: 3em;
  padding: 0.2em;
  border-radius: 5px;
  text-align: center;
  border: 1px solid transparent;
}

.c-switch__on {
  display: none;
  float: right;
  background-color: #66c2ff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.075);
}
.c-switch__on:after {
  content: "ON";
}

.c-switch__off {
  float: left;
  background-color: #005c99;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.075) inset;
}
.c-switch__off:after {
  content: "OFF";
}

.c-switch__checkbox {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.c-switch__checkbox:focus ~ .c-switch__on {
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.075), 0 0 5px #007acc;
}
.c-switch__checkbox:focus ~ .c-switch__off {
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px #007acc;
}
.c-switch__checkbox:checked ~ .c-switch__on {
  display: inline-block;
}
.c-switch__checkbox:checked ~ .c-switch__off {
  display: none;
}

SassMeister-rendered.html

<p>
  
  <label class="c-switch">
    <input type="checkbox" class="c-switch__checkbox" />
    <span class="c-switch__on"></span>
    <span class="c-switch__off"></span>
  </label>

</p>