Generated by SassMeister.com.

SassMeister-input.scss

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

//------------------------------------*\
//    $BREAKPOINTS
//------------------------------------*/
//**
// * "Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!"
// */

$bp1 : 30em;
$bp2 : 37.5em;
$bp3 : 48em;
$bp4 : 56.25em;
$bp5 : 68.75em;

/*------------------------------------*\
    $IMAGE-DIR
\*------------------------------------*/
/**
 * Con agregar esta variable a las imágenes declaradas en CSS apañamos:
 */
$image-dir: "../img";


/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Si decides incluir lt-ie9 para dar soporte a navegadores sin estilos
 * esta es la clase que se añadirá a todos los elementos.
 */
$no-mq-classname: ".ie8-sucks";

@mixin media-query-bp($breakpoint, $query1: min, $query2: width, $target: "") {

	// Check if media queries are supported
	@if $media-queries-supported == true {
		@if $target != "" {
			@media #{$target} and (#{$query1}-#{$query2}: #{$breakpoint}) {
				@content;
			}
		}
		@else {
			@media (#{$query1}-#{$query2}: #{$breakpoint}) {
				@content;
			}
		}
	}
	@else {
		#{$no-mq-classname} & {
			@content;
		}
	}
}


/*------------------------------------*\
    $STYLE
\*------------------------------------*/
$media-queries-supported : true;


body {
  font-size: 80%;
  @include media-query-bp($bp1) {
    font-size: 100%;
  }
}

nav {
  width: 100%;
  @include media-query-bp($bp3, max, device-width, print) {
    width: 40%;
  }
  
}

SassMeister-output.css

@charset "UTF-8";
/*------------------------------------*\
    $IMAGE-DIR
\*------------------------------------*/
/**
 * Con agregar esta variable a las imágenes declaradas en CSS apañamos:
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Si decides incluir lt-ie9 para dar soporte a navegadores sin estilos
 * esta es la clase que se añadirá a todos los elementos.
 */
/*------------------------------------*\
    $STYLE
\*------------------------------------*/
body {
  font-size: 80%;
}
@media (min-width: 30em) {
  body {
    font-size: 100%;
  }
}

nav {
  width: 100%;
}
@media print and (max-device-width: 48em) {
  nav {
    width: 40%;
  }
}