Object Oriented Media Queries with Sass

_mixin.scss

@mixin respond-to($media) {
  @if $media == small {
    @media only screen and (max-width: 1024px) {
      @content;
    }
  }
  @if $media == tablet {
    // @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //   @content;
    // }
    @media only screen and (min-width: 768px) and (max-width: 959px) {
      @content;
    }
  }
  @else if $media == mobile {
    @media only screen and (max-width: 767px) {
      @content;
    }
  }
}

main.scss

import 'mixin';

img.image-type {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 15px;
  top: 15px;
  @include respond-to(mobile) {
    top: 10px;
    right: 10px;
  }
}