Skip to content

Instantly share code, notes, and snippets.

@magsout
Last active April 5, 2019 07:40
Show Gist options
  • Save magsout/5978325 to your computer and use it in GitHub Desktop.
Save magsout/5978325 to your computer and use it in GitHub Desktop.
Responsive Design Configuration Sass
/* 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;
/**
* 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);
}
}
/**
* 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);
}
/**
* 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;
}
}
@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;
}
}
@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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment