Mixins for responsive properties for Foundation 5: Like a shorthand to play with media-queries.

responsivemixin-foundation5.scss

/*

++ MIXIN: Zurb Foundation 5 Responsive CSS Property ++
 
Define any CSS property and their values for phone, tablet and desktop.
 
i.e.:

@include rprop(margin-top,10px,20px,30px);


Will render:
	
Mobile  => margin-top: 10px
Tablet  => margin-top: 20px
Desktop => margin-top: 30px

Note: The property (obviously) and the three values are required.

*/

/* FROM FOUNDATION 5 _settings.scss:
// $small-range: (0em, 40em); /* 0, 640px */
// $medium-range: (40.063em, 64em); /* 641px, 1024px */
// $large-range: (64.063em, 90em); /* 1025px, 1440px */
// $xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
// $xxlarge-range: (120.063em); /* 1921px */

@import "foundation/components/grid";

@mixin rprop(
	$prop,$phone-value:"", 
	$tablet-value:"", 
	$desktop-value:""
	)
	{
	#{$prop}: $phone-value;
	@media #{$medium-up} {#{$prop}: $tablet-value;}
	@media #{$large-up} {#{$prop}: $desktop-value;}
}

/* 
	I've been using 'rprop' for a while and it cover most cases that I needed but I created another mixin called 'rpropX' for an extended control and play with longest screen size ranges.
*/


@function nullCheck ($value) {
  @if $value == n or $value == _ {
    @return null;
  }
  @else {
    @return $value;
  }
}


@mixin rpropX($prop,$small-value,$medium-value,$large-value,$xlarge-value,$xxlarge-value){
	@if nullCheck($small-value) != null { #{$prop}: $small-value; }
	@if nullCheck($medium-value) != null { @media #{$medium-up} {#{$prop}: $medium-value;}}
	@if nullCheck($large-value) != null { @media #{$large-up} {#{$prop}: $large-value;}}
	@if nullCheck($xlarge-value) != null { @media #{$xlarge-up} {#{$prop}: $xlarge-value;}}
	@if nullCheck($xxlarge-value) != null { @media #{$xxlarge-up} {#{$prop}: $xxlarge-value;}}
}
/*
"Who is who" in 'rpropX':
	
		- $prop = The CSS property [REQUIRED, obviously]
		- $small-value = Value from 0px.
		- $medium-value = Value for at least 641px (40.063em).
		- $large-value  = Value for at least 1025px (64.063em).
		- $xlarge-value = Value for at least 1441px (90.063em) .
		- $xxlarge-value = Value for at least 1921px (120.063em).
	
	Example:
	
	p.test{
		@include rpropX(font-size,10px,20px,30px,40px,50px)
	}

	This will produce a large set of CSS Media-Queries that, in short will render:
		
		- font-size: 10px for small
		- font-size: 20px for medium
		- font-size: 30px for large
		- font-size: 40px for xlarge
		- font-size: 50px for xxlarge 
		
	-  If you don't want to set a value for a specific media-query screen range you can set it to "null", "_" or "n" (it must have a value, don't leave it empty). In that case, that screen range will inherit the property of its closest smaller range.
	
	Example:
	
	p.test{
		@include rpropX(font-size,10px,_,30px,_,_) // you can use "null" or "n" (without quotation) too.
	}
	
	This time, the mixin will produce this lean CSS:
	
	p.test{font-size:10px} // for every screen size range
	
	@media only screen and (min-width: 64.063em){ // overrides for large scren size range and up
		p.test{
			font-size:30px
		}
	}

*/


/* 
	Do you want to define a property for a specific screen size only? No problem
	
	Example:
	
	#example-block{
		font-size: 22px; // 22px for every screen-size
		@mixin smallprop(font-size,16px); // 16px for medium-range screens
	}
	
	Note: Maybe obvious but remember to place the mixin AFTER the "all-screen-sizes-value" (font-size: 22px) in order to override it.
	
*/

@mixin smallprop($prop,$value:""){
	@media #{$small-only} {#{$prop}: $value;}
}	
@mixin mediumprop($prop,$value:""){
	@media #{$medium-only} {#{$prop}: $value;}
}	
@mixin largeprop($prop,$value:""){
	@media #{$large-only} {#{$prop}: $value;}
}
@mixin xlargeprop($prop,$value:""){
	@media #{$xlarge-only} {#{$prop}: $value;}
}
@mixin xxlargeprop($prop,$value:""){
	@media #{$xxlarge-only} {#{$prop}: $value;}
}