Responsive SASS

responsive-sass-sample.scss

$page-width: 970px;

$mobile: "only screen and (max-width: #{$page-width})";

// As mixin
@mixin mobile() {
	@media #{$mobile} {
		@content;
	}
}

// Using the mixin
.responsive-block-a {
	background-color: red;
	padding-left: 70px;

	@include mobile {
		padding-left: 0;
		background-color: blue;
		
		.foo {
		  color: black;
		}
	}
}

// Using the media query
.responsive-block-b {
	background-color: red;
	padding-left: 70px;
	
	@media #{$mobile} {
		padding-left: 0;
		background-color: blue;
		
		.foo {
		  color: black;
		}
	}
}