SCSS mixin for responsive properties.

responsive-prop.scss

/*

Nice little SCSS mixin for quick responsive mixins for a property. This also dependent on what your break points look like. I have three called $venti, $grande, and $tall. Just change those to be whatever Sass breakpoint variables you have set-up. If you use to value 'no' it won't output anything in that breakpoint.

Example use:
.my-class {
  @include responsive-prop(font-size, 16pt, 12pt, 8pt);
  @include responsive-prop(border-bottom, 3px solid gray, 1px solid gray, no);
}

.my-other-class {
  // Hide div at smallest breakpoint
  @include responsive-prop(display, block, block, none);
}

*/

@mixin responsive-prop($prop, $large, $medium, $small) {
	@include media($venti) {
		@if $large == "no" {

		} @else {
			#{$prop}: $large;
		}
	}
	@include media($grande) {
		@if $medium == "no" {

		} @else {
			#{$prop}: $medium;
		}
	}
	@include media($tall) {
		@if $small == "no" {

		} @else {
			#{$prop}: $small;
		}
	}
}

Why not the following:

@if $small != "no" {
    #{$prop}: $small
}

Pushing things further: http://codepen.io/HugoGiraudel/pen/afa6918ac4ba9283185c75f4e1af2dd1.