Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Created August 22, 2014 06:49
Show Gist options
  • Save jakob-e/28cf886875508186523b to your computer and use it in GitHub Desktop.
Save jakob-e/28cf886875508186523b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.0)
// Compass (v1.0.0)
// ----
// Create a map containing breakpoints
//
$breakpoints:(
all : 0 0,
mobile : 0 640px,
tablet : 641px 960px,
desktop: 961px 1200px,
large : 1201px 0
);
$breakpoints-units:'em';
// Define global variables for keeping state
$current-breakpoint:'' !global;
$current-context :'' !global;
// Media - just my name for breakpoint
// @media is after all what is returned :)
@mixin media($breakpointlabels...){
// Loop thru passed breakpoint keys
@each $key in $breakpointlabels {
$value:map-get($breakpoints,$key);
$min:if(length($value)>0, nth($value,1), null); // add unit conversion
$max:if(length($value)>1, nth($value,2), null);
$mq :' all';
$mq : $mq + if($min>0 or $max>0,' and ','');
$mq : $mq + if($min>0,'(min-width:'+$min+')','');
$mq : $mq + if($min>0 and $max>0,' and ','');
$mq : $mq + if($max>0,'(max-width:'+$max+')','');
$mq : unquote($mq);
@media #{$mq} {
$current-breakpoint:$key !global;
@content;
$current-breakpoint:'' !global;
}
}
}
@mixin new-extend($name){
%#{$current-context + $name}{ @content;}
}
@mixin extends(){
@each $key, $value in $breakpoints {
@include media($key){
$current-context:$key !global;
@content;
$current-context:'' !global;
}
}
@content;
}
@mixin extend($name){ & { @extend %#{$current-breakpoint+$name}; } }
@include extends(){
@include new-extend(foo){ hello:foo; }
@include new-extend(bar){ hello:bar; }
@include new-extend(doh){ hello:doh; }
};
.a { @include media(mobile,tablet){
@include extend(foo);
}
}
.c { @include media(tablet){
@include extend(foo);
@include extend(bar);
@include extend(doh);
}
}
@include media(tablet){
normal:'dsddd';
a { @include extend(doh); }
}
.outofscope { @extend %foo; joe:jane; }
// %#{$key + '-foo'}{ mynameis:foo; context:$key; }
// %#{$key + '-bar'}{ mynameis:bar; context:$key; }
@media all and (max-width: 640px) {
.a {
hello: foo; } }
@media all and (min-width: 641px) and (max-width: 960px) {
.a, .c {
hello: foo; }
.c {
hello: bar; }
.c, a {
hello: doh; } }
.outofscope {
hello: foo; }
@media all and (min-width: 641px) and (max-width: 960px) {
normal: 'dsddd'; }
.outofscope {
joe: jane; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment