This snippet is based on Hugo Giraudel's article(http://www.sitepoint.com/managing-responsive-breakpoints-sass/)

_grid.scss

// susy default settings
@include border-box-sizing;
$susy: 16 ( 45px 30px ) static;
$layout-desktop: 16 ( 40px 20px ) static;
$layout-tablet : 12 ( 40px 20px ) static;
$layout-mobile : 2 ( 50% 15px ) fluid inside;
$layout-mobileport : 2 ( 50% 15px ) fluid inside;

$layouts: (
	desktop: $layout-desktop,
	tablet: $layout-tablet,
	mobile: $layout-mobile,
	mobileport: $layout-mobileport
);

$breakpoints: (
	large: 1280px,
	desktop: 1024px,
	tablet: 768px,
	mobile: 640px,
	mobileport : 480px
);

// rwd mixin with susy
// @param $breakpoint : device name
// @param $max : @media width condition / true = max / false = min
// return @media screen and css rules
@mixin respond-to($breakpoint, $max: true) {

	@if map-has-key($breakpoints,$breakpoint) {

		$conf : max-width;
		$max-device : large;

		@if $breakpoint == desktop {
			$max-device : large;
		} @else if $breakpoint == tablet {
			$max-device : desktop;
		} @else if $breakpoint == mobile {
			$max-device : tablet;
		} @else if $breakpoint == mobileport {
			$max-device : mobileport;
		}

		$width : map-get($breakpoints,$max-device)-1;

		@if $max == false {
			$conf : min-width;
			$width : map-get($breakpoints,$breakpoint);
		}

		@media screen and ( $conf : $width ){
			@include with-layout( map-get($layouts,$breakpoint) ) {
				@content;
			}
		}
	}
	@else {
		@warn "Unfortunately, no value could be retrieved from '#{$breakpoint}'. "
			+ "Please make sure it is defined in '$breakpoints' map.";
	}
}

// Usage
.foo {

	@include respond-to(desktop, false) {
		background-color:yellow;
	}

	.bar1 {
		background-color:orange;

		@include respond-to(tablet) {
			background-color:blue;
		}
	}

	.bar2 {
		background-color:green;

		@include respond-to(mobile) {
			background-color:purple;
		}
	}
}

// output
@media screen and (min-width: 970px) {
  .foo {
    background-color: yellow;
  }
}
.foo .bar1 {
  background-color: orange;
}
@media screen and (max-width: 969px) {
  .foo .bar1 {
    background-color: blue;
  }
}
.foo .bar2 {
  background-color: green;
}
@media screen and (max-width: 767px) {
  .foo .bar2 {
    background-color: purple;
  }
}

This snippet is based on Hugo Giraudel's article(http://www.sitepoint.com/managing-responsive-breakpoints-sass/)