Last active
August 24, 2016 13:23
-
-
Save dennisfrank/3574c36553ce76950e61 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.3.6) | |
// ---- | |
///* ======================================================================== | |
// #SETTINGS | |
// ======================================================================== */ | |
// Map of breakpoints | |
$breakpoints: ( | |
'small': '(min-width: 53rem)', | |
'medium': '(min-width: 62rem)', | |
'large': '(min-width: 71rem)', | |
); | |
///* ======================================================================== | |
// #RESPONSIVE MIXIN | |
// ======================================================================== */ | |
$responsive-exclude-default: null !default; | |
// Mixin to quickly generate different responsive selectors | |
// based upon the breakpoints defined in `breakpoints` map. | |
@mixin responsive($selector: null, $exclude: $responsive-exclude-default, $include: all) { | |
@if ($exclude == null) { | |
$exclude: $responsive-exclude-default | |
} | |
// Loop through our previously-defined breakpoints. | |
@each $breakpoint, $mediaquery in $breakpoints { | |
// Exclude breakpoints | |
@if (index($exclude, $breakpoint) == null) { | |
// Include breakpoints | |
@if ($include == all or $include == null or index($include, $breakpoint)) { | |
// If a selector is given base responsive selectors on it | |
@if ($selector !=null) { | |
// Build media-query based selector | |
@media #{$mediaquery} { | |
#{$selector}\@#{$breakpoint} { | |
@content; | |
} | |
} | |
} | |
// If no selector is given | |
@else { | |
// Make breakpoint variable global to allow use in @content | |
$breakpoint: $breakpoint !global; | |
// Build media-query without selector | |
@media #{$mediaquery} { | |
@content; | |
} | |
// Take the global breakpoint variable back out of scope | |
$breakpoint: null !global; | |
} | |
} // Close include check | |
} // Close exclude check | |
} // Close breakpoints loop | |
} | |
/* ========================================================================== | |
#DEMOS | |
========================================================================== */ | |
/* 1. Simple selector as argument | |
========================================================================== */ | |
/** | |
* One selector per media-query | |
*/ | |
@include responsive('.u-inline') { | |
display: inline !important; | |
} | |
/* 2. Simple selector as @content | |
========================================================================== */ | |
/** | |
* One selector per media-query | |
*/ | |
@include responsive() { | |
.u-inline\@#{$breakpoint} { | |
display: inline !important; | |
} | |
} | |
/* 3. Multiple selectors as @content | |
========================================================================== */ | |
/** | |
* Multiple selectors per media-query possible | |
*/ | |
@include responsive() { | |
.u-inline\@#{$breakpoint} { | |
display: inline !important; | |
} | |
.u-block\@#{$breakpoint} { | |
display:block !important; | |
} | |
} | |
/* 4. Multiple selectors with pseudo element as @content | |
========================================================================== */ | |
@include responsive() { | |
.u-ratio-1\/2\@#{$breakpoint}:after { | |
padding-bottom: 50% !important; | |
} | |
.u-ratio-1\/4\@#{$breakpoint}:after { | |
padding-bottom: 25% !important; | |
} | |
} | |
/* 5. Exclude breakpoint | |
========================================================================== */ | |
/** | |
* Exlude 'large' breakpoint | |
*/ | |
@include responsive($exclude: large) { | |
.u-inline\@#{$breakpoint} { | |
display: inline !important; | |
} | |
} | |
/* 6. Exclude multiple breakpoints | |
========================================================================== */ | |
/** | |
* Exlude 'large' and 'small' breakpoints | |
*/ | |
@include responsive($exclude: large small) { | |
.u-inline\@#{$breakpoint} { | |
display: inline !important; | |
} | |
} | |
/* 7. Include breakpoint | |
========================================================================== */ | |
/** | |
* Include 'large' breakpoint only | |
*/ | |
@include responsive($include: large) { | |
.u-inline\@#{$breakpoint} { | |
display: inline !important; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ========================================================================== | |
#DEMOS | |
========================================================================== */ | |
/* 1. Simple selector as argument | |
========================================================================== */ | |
/** | |
* One selector per media-query | |
*/ | |
@media (min-width: 53rem) { | |
.u-inline\@small { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 62rem) { | |
.u-inline\@medium { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 71rem) { | |
.u-inline\@large { | |
display: inline !important; | |
} | |
} | |
/* 2. Simple selector as @content | |
========================================================================== */ | |
/** | |
* One selector per media-query | |
*/ | |
@media (min-width: 53rem) { | |
.u-inline\@small { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 62rem) { | |
.u-inline\@medium { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 71rem) { | |
.u-inline\@large { | |
display: inline !important; | |
} | |
} | |
/* 3. Multiple selectors as @content | |
========================================================================== */ | |
/** | |
* Multiple selectors per media-query possible | |
*/ | |
@media (min-width: 53rem) { | |
.u-inline\@small { | |
display: inline !important; | |
} | |
.u-block\@small { | |
display: block !important; | |
} | |
} | |
@media (min-width: 62rem) { | |
.u-inline\@medium { | |
display: inline !important; | |
} | |
.u-block\@medium { | |
display: block !important; | |
} | |
} | |
@media (min-width: 71rem) { | |
.u-inline\@large { | |
display: inline !important; | |
} | |
.u-block\@large { | |
display: block !important; | |
} | |
} | |
/* 4. Multiple selectors with pseudo element as @content | |
========================================================================== */ | |
@media (min-width: 53rem) { | |
.u-ratio-1\/2\@small:after { | |
padding-bottom: 50% !important; | |
} | |
.u-ratio-1\/4\@small:after { | |
padding-bottom: 25% !important; | |
} | |
} | |
@media (min-width: 62rem) { | |
.u-ratio-1\/2\@medium:after { | |
padding-bottom: 50% !important; | |
} | |
.u-ratio-1\/4\@medium:after { | |
padding-bottom: 25% !important; | |
} | |
} | |
@media (min-width: 71rem) { | |
.u-ratio-1\/2\@large:after { | |
padding-bottom: 50% !important; | |
} | |
.u-ratio-1\/4\@large:after { | |
padding-bottom: 25% !important; | |
} | |
} | |
/* 5. Exclude breakpoint | |
========================================================================== */ | |
/** | |
* Exlude 'large' breakpoint | |
*/ | |
@media (min-width: 53rem) { | |
.u-inline\@small { | |
display: inline !important; | |
} | |
} | |
@media (min-width: 62rem) { | |
.u-inline\@medium { | |
display: inline !important; | |
} | |
} | |
/* 6. Exclude multiple breakpoints | |
========================================================================== */ | |
/** | |
* Exlude 'large' and 'small' breakpoints | |
*/ | |
@media (min-width: 62rem) { | |
.u-inline\@medium { | |
display: inline !important; | |
} | |
} | |
/* 7. Include breakpoint | |
========================================================================== */ | |
/** | |
* Include 'large' breakpoint only | |
*/ | |
@media (min-width: 71rem) { | |
.u-inline\@large { | |
display: inline !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment