Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$breakpoints: (
  small: 640px,
  large: 1024px
);

$devices: (
  mobile: (
    '<small'
  ),
  tablet: (
    '>small',
    '<large'
  ),
  desktop: (
    '>large'
  )
);

@function parse-expression($expression) {
  $operator: '';
  $value: '';
  $query: '';
  $result: '';
  
  // Separating the operator from the rest of the expression
  @if (str-slice($expression, 2, 2) == "=") {
    $operator: str-slice($expression, 1, 2);
    $value: str-slice($expression, 3);
  } @else {
    $operator: str-slice($expression, 1, 1);
    $value: str-slice($expression, 2);
  }
  
  // Checking what type of expression we're dealing with
  @if map-has-key($breakpoints, $value) {
    $result: map-get($breakpoints, $value);
  } @else if ( to-number($value) == $value ) {
    $result: to-number($value);
  } @else {
    @error 'Invalid expression ' + $expression;
  }
  
  @if ( $operator == '>') {
    $query: '(min-width: #{$result + 1})';
  }
  @else if ( $operator == '>=') {
    $query: '(min-width: #{$result})';
  }
  @else if ( $operator == '<') {
    $query: '(max-width: #{$result+1})';
  }
  @else if ( $operator == '<=') {
    $query: '(max-width: #{$result})';
  }
  @else {
      @error "'#{$expression}' is missing an operator.";
  }
  
  @return $query;
}
 
@function create-media-query($conditions, $dpr: 1.5, $min-resolution: 192, $media: null) {
  $query: '';
  $retina: null;
  
  @if ( $media ) {
    $query: $query + $media;
  }
  
  @if ( type-of($conditions) == "string" ) {
    $conditions: ($conditions);
  }
  
  @each $condition in $conditions {
    @if ($condition == 'retina') {
      $retina: true;
    } @else {
      $expression: parse-expression($condition);
      @if ( str-length($query) > 0 ) {
        $query: $query + ' and ';
      }
      $query: $query + $expression;
    }
  }
  
  @if $retina {
    $first_query: $query;
    $query: $query + ' and (-webkit-min-device-pixel-ratio: ' + $dpr + ')';
    
    // Add min-resolution to
    $query: $query + ', ' + $first_query + ' and (min-resolution: #{$min-resolution}dpi)';
  }
 
  @return $query;
};

@mixin respond-to-size($conditions...) {
  @if ( length($conditions) == 1 && type-of nth($conditions, 1) == 'list' ) {
    $conditions: nth($conditions, 1);
  }
  
  @if (length($conditions) == 0) {
    @error "No condition given!";
  }
  
  $query: create-media-query($conditions, 2, 192);
  
  @media #{$query} {
    @content;
  }
}

@mixin respond-to($device, $retina: false) {
  @if ( map-has-key($devices, $device) ) {
    $conditions: map-get($devices, $device);
    
    @if $retina {
      $conditions: append($conditions, 'retina');
    }
    
    @include respond-to-size($conditions) {
      @content;
    }
  }
}

.test {
  @include respond-to('desktop', true) {
    width: 100%;
  }
}

SassMeister-output.css

@media (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1025px) and (min-resolution: 192dpi) {
  .test {
    width: 100%;
  }
}