Responsive Design Configuration Sass

_config.scss

/* Config */
$arraySmartphone	 :	'{"device": "phone",  	"googleMaps": false, 	"slider": false, "menu" : true}' 	!default; 
$arraytablette 		 :	'{"device": "tablet", 	"googleMaps": true, 	"slider": false, "menu" : true}' 	!default; 
$arrayDesktop 		 :	'{"device": "desktop",	"googleMaps": true, 	"slider": true,  "menu" : false}'	!default; 


/* List */
$deviceList		: ("phone" 		"tablet" 		"desktop"	) !default; // list of devices
$minWidthList		: ("" 			"768px" 		"1025px"	) !default; // List min-width (empty if unspecified)
$maxWidthList		: ("767px" 		"1024px" 		""		) !default;// List  max-width (empty if unspecified)
$configList		: ($arraySmartphone 	$arraytablette 		$arrayDesktop	) !default;

_function.scss

/**
 * Récupère la directive min-width pour les média query du device spécifié
 * @param string device
 * @return string min-width
 */
@function mq-minWidth($device) 
{
	$indexOf : index($deviceList,$device);
	@if(false == $indexOf) 
	{
		@warn "mq-minWidth() - no mq-minWidth found";
		@return false;
	} 
	@else 
	{
		@return unquote(nth($minWidthList, $indexOf));
	}
}

/**
 * Récupère la directive max-width pour les média query du device spécifié
 * @param string device
 * @return string max-width
 */
@function mq-maxWidth($device) 
{
	$indexOf : index($deviceList,$device);
	@if(false == $indexOf) 
	{
		@warn "mq-maxWidth() - no mq-maxWidth found";
		@return false;
	} 
	@else 
	{
		@return unquote(nth($maxWidthList, $indexOf));
	}
}

/**
 * Récupère la configuration CSS du device spécifié
 * @param string device
 * @return string json de configuration
 */
@function mq-config($device) 
{
	
	$indexOf : index($deviceList,$device);
	@if(false == $indexOf) 
	{
		@warn "mq-config() - no mq-config found";
		@return false;
	} 
	@else 
	{
		@return nth($configList, $indexOf);
	}
}

_helpers.scss

/**
 * Vérifie qu'une variable et non vide et test optionnellement son type
 * @param mixed variable à tester
 * @param string type de variable à tester
 * @return boolean true si la variable répond aux conditions non vide et type
 */
@function isNotEmpty($str, $type:false) {
  $checkType : true;
  @if($type != false and type-of($type) == string) {
		$checkType : (type-of($str) == $type);
	}
	@return($str != "" and $str != 0 and $str != false and $checkType);
}

mixin.scss

/**
 * Applique une media query pour un device
 * @param string|number|false device ou valeur en pixel ou false si borne non précisé
 * @param string|number|false device ou valeur en pixel ou false si borne non précisé
 * @param string|false options à ajouter à la media query
 */
@mixin mq($fromDevice:false, $toDevice:false, $options:false) 
{
	$minWidth : false;
	$maxWidth : false;
	
	@if((false != $fromDevice) and (false == $toDevice) and (false == $options))
	{
		@include mq-device($fromDevice, $options){ @content; }
	}
	@else 
	{
		@if(isNotEmpty($fromDevice)) 
		{
			@if(string == type-of($fromDevice))
			{			
				$minWidth : mq-minWidth($fromDevice);	
			}
			@else if(number == type-of($fromDevice))
			{
				@if(unitless($fromDevice))
				{
					@warn "No unit #{$fromDevice}"; 
				}
				@else
				{
					$minWidth : $fromDevice;
				}				
			}		
			@if(false == $minWidth) 
			{
				@warn "mq : min-width not exist : #{$fromDevice}";
			}
		}		
		
		@if(isNotEmpty($toDevice)) 
		{
			@if(string == type-of($toDevice))
			{
				$maxWidth : mq-maxWidth($toDevice);	
			}
			@else if(number == type-of($toDevice))
			{
				@if(unitless($toDevice))
				{
					@warn "No unit #{$toDevice}"; 
				}
				@else
				{
					$maxWidth : $toDevice;
				}				
			}
			@if(false == $maxWidth) 
			{
				@warn "mq : max-width not exist : #{$toDevice}";
			}	
		}		
	
		@include mq-pixel($minWidth, $maxWidth, $options){ @content; };
	}
}

/**
 * Applique une media query pour un device
 * @param string|number|false device ou valeur en pixel
 * @param string|false options à ajouter à la media query
 */
@mixin mq-device($device, $options:false)
{	
	@include mq-pixel(mq-minWidth($device), mq-maxWidth($device), $options){ @content; };
}

/**
 * Applique une media query pour un device
 * @param string device
 */
@mixin mq-pixel($minWidth:false, $maxWidth:false, $options:false) 
{
	$mediaQuery	: "";
	// Forge min-width
	@if(isNotEmpty($minWidth))	
	{
		$mediaQuery	: '#{$mediaQuery} and (min-width : #{$minWidth})';
	}
	// Forge max-width
	@if(isNotEmpty($maxWidth)) 
	{
		$mediaQuery	: '#{$mediaQuery} and (max-width : #{$maxWidth})';
	}
	// Forge options
	@if(isNotEmpty($options) and string == type-of($options))
	{
		$mediaQuery	: '#{$mediaQuery} #{$options}';
	}
	// Warning if media query is empty
	@if($mediaQuery == "") 
	{
		@warn "Media query is empty : @media all {}";
	}
	// Forge final media query	
	$mediaQuery : unquote(#{$mediaQuery});
	@media all #{$mediaQuery}
	{
		@content;
	}
}

render.scss

@media all and (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  .mq1-test {
    color: red;
  }
}
@media all and (max-width: 767px) and (orientation: landscape), screen and (min-color: 4) {
  .mq2-test {
    color: blue;
  }
}
@media all and (min-aspect-ratio: 1 / 1), screen and (orientation: landscape) {
  .mq3-test {
    color: green;
  }
}
@media all and (max-width: 767px) {
  .mq4-test {
    color: purple;
  }
}
@media all and (orientation: landscape) {
  .mq5-test {
    color: black;
  }
}
@media all and (max-width: 767px) and (orientation: landscape) {
  .mq6-test {
    color: white;
  }
}
@media all and (max-width: 1024px) {
  .mq7-test {
    color: yellow;
  }
}
@media all and (min-width: 768px) and (orientation: landscape) {
  .mq8-test {
    color: gray;
  }
}

ui.scss

@include mq("tablet", 1280px, "and (orientation: landscape)") {
  .mq1-test
  {
    color: red;
	}
};
@include mq(false, "phone", "and (orientation: landscape), screen and (min-color: 4)") {
	.mq2-test
	{
		color: blue;
	}
};
@include mq(false, false, "and (min-aspect-ratio: 1/1), screen and (orientation: landscape)") {
	.mq3-test
	{
		color: green;
	}
};

@include mq('phone')
{
	.mq4-test
	{
		color: purple;
	}
}

@include mq('phone', false, "and (orientation: landscape)")
{
	.mq5-test
	{
		color: black;
	}	
}
@include mq(false, 'phone', "and (orientation: landscape)")
{
	.mq6-test
	{
		color: white;
	}	
}
@include mq('phone', 'tablet')
{
	.mq7-test
	{
		color: yellow;
	}	
}
@include mq('tablet', false, "and (orientation: landscape)")
{
	.mq8-test
	{
		color: gray;
	}	
}