my custom mixins SASS

mixins.scss

// return width - padding
@function calc-width($width, $padding) {
  @return $width - $padding
}

// return height - padding
@function calc-height($height, $padding) {
  @return $height - $padding
}

// convert px to em
@function em($px, $base: 13px) {
  @return ($px / $base) * 1em;
}

// clearfix
@mixin clearfix {
  zoom: 1;
  &:before, &:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
  }
  &:after {
    clear: both;
  }
}


// breakpoints media-queries
@mixin respond-to($breakpoint) {
  @if $breakpoint == "small" {
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      @content;
    }
  }
 
  @else if $breakpoint == "medium" {
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      @content;
    }
  }
 
  @else if $breakpoint == "large" {
    @media only screen  and (min-width : 1224px) {
      @content;
    }
  }
}

// usage with @media queries sprites
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {
  $sprite-image: sprite-file($map, $sprite);
  $sprite-map: sprite-url($map);
  $sprite-position: sprite-position($map, $sprite);
  background: $sprite-map $sprite-position $repeat;
  
  @if $height == true {
    $sprite-height: image-height($sprite-image);
    height: $sprite-height;
  }
  
  @if $width == true {
    $sprite-width: image-width($sprite-image);
    width: $sprite-width; 
  }
}

//usage get-sprites
$icons: sprite-map("my-sprite/*.png");
.my-element {
  @include get-sprite($icons, name);
}