Simple little switch

_switch.scss

//
//  Use following jQuery:
//
// <script type="text/javascript">
//   $(document).ready( function(){
//     $(".switch").click( function() {
//       $(".switch").toggleClass("on");
//     });
//   });
// </script>
//
//
// And this markup
//
// <figure class="switch">
//   <figure>
//   </figure>
// </figure>

@import "compass/css3";
%border-box {
  @include box-sizing(border-box);
}
%block-absolute {
  position: absolute;
  display: block;
}
%transition {
  @include transition-duration(0.2s);
  @include transition-timing-function(ease);
}

// All CSS Declarations that don't require manipulation of variables
%switch {
  @extend %border-box;
  display: block;
  font-family: sans-serif;
  & > figure {
    @extend %border-box;
    @extend %transition;
    position: relative;
    width: 100%;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); // &:after;
    &:before {
      @extend %border-box;
      @extend %transition;
      @extend %block-absolute;
      top: 1px;
      left: 1px;
      z-index: 100;
      box-shadow: 2px 0 3px rgba(0,0,0,0.3);
      content: ' ';
    } // &:before
    &:after {
      @extend %border-box;
      @extend %block-absolute;
      @extend %transition;
      z-index: 50;
      text-transform: uppercase;
      text-shadow: 1px 1px 0px rgba(255,255,255, 1);
      font: 10px 'helvetica neue', sans-serif;
    }
  } // & > figure
  &.on { // .on class manipulates active state of button
    & > figure { // &:after;
      &:before {
        left: auto;
        box-shadow: 0 0 2px rgba(0,0,0,0.25);
      } // &:before
      &:after {
        left: auto;
        text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
      } // &:after;
    } // & > figure;
  } // .on;
} // %switch

@mixin switch( // Declare all variables needed, make sure that they have a fallback value
    $width: 70px,
    $height: 30px,
    $background: #e1e1e1,
    $active-col: #2ecc71,
    $text-col: #d1d1d1,
    $inset: 2px,
    $off-content: 'off',
    $on-content: 'on'
  ){ // First variable calculations, then placeholder class, followed by mixin @includes, then only CSS declarations that require variables, if they dont't, put them in the placeholder class
  $inner-width: $height - ($inset * 2);
  $inner-inner-width: $inner-width - ($inset * 2);
  @extend %switch;
  @include background(linear-gradient(top left, fade_out($background, 0.01), fade_out($background, 1)));
  width: $width;
  height: $height;
  border-radius: $height / 2; // &:hover
  padding: $inset;
  & > figure {
    height: $inner-width;
    border-radius: $inner-width / 2;
    background: lighten($background, 6.2%); // &:after;
    &:before {
      @include background(linear-gradient(top, lighten($background, 1%), lighten($background, 10%)));
      width: $inner-inner-width;
      height: $inner-inner-width;
      border: $inset * 1.5 solid #fff;
      border-radius: $inner-inner-width / 2;
    } // &:before
    &:after {
      top: $height / 5;
      left: $height + $inset;
      color: $text-col;
      content: "OFF";
    }
  } // & > figure
  &.on { // .on class manipulates active state of button
    > figure {
      background: $active-col;
      box-shadow: 0 0 ($inset * 2) ($inset * 1) fade_out(lighten($active-col, 5%),0.5); // &:after;
      &:before {
        left: ($width - $inner-width) - $inset * 1.5; // 2 !important;
      } // &:before
      &:after {
        right: $height + $inset;
        color: darken($active-col, 5%);
        content: $on-content;
      } // &.on;
    } // > figure;
  } // &.on
} // @mixin switch