SASS #each skip specific line(s) if variable exists - css

Question

I'm attempting to build a grid system using SASS and so far so good however if the breakpoint is 'xs' I'd like to skip the #media #{$query} { and } line for this as the xs no longer needs a media query.
Can anyone advise?
$default__gridColumns: 18;
$default__flexColumns: 12;
$default__gutter: 20px;
$default__breakpoints: (
'xs': 'screen and (max-width: 767px)',
'sm': 'screen and (min-width:768px) and (max-width:1023px)',
'md': 'screen and (min-width:1024px) and (max-width:1200px)',
'lg': 'screen and (min-width:1201px) and (max-width:1440px)'
);
.flex {
display: flex;
margin: 0 -$default__gutter;
padding: 0 $default__gutter;
> *[class^="span__"] {
padding: 0 $default__gutter;
position: relative;
}
#each $breakpoint, $query in $default__breakpoints {
#media #{$query} {
#for $i from 1 through $default__flexColumns {
> .span__#{$breakpoint}--#{$i} {
width: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--offsetLeft-#{$i} {
margin-left: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--offsetRight-#{$i} {
margin-right: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--push-#{$i} {
left: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--pull-#{$i} {
right: $i/$default__flexColumns * 100%;
}
> .visible__#{$breakpoint} {
display: block !important;
}
> .visible__#{$breakpoint}--flex {
display: flex !important;
}
> .visible__#{$breakpoint}--inline {
display: inline !important;
}
> .visible__#{$breakpoint}--inlineBlock {
display: inline-block !important;
}
> .hidden__#{$breakpoint}--inlineBlock {
display: none !important;
}
}
}
}
}

Answer 1

Updated to use a #mixin.
You can use an #if directive to test the value of the $breakpoint:
$default__gridColumns: 18;
$default__flexColumns: 12;
$default__gutter: 20px;
$default__breakpoints: (
'xs': 'screen and (max-width: 767px)',
'sm': 'screen and (min-width:768px) and (max-width:1023px)',
'md': 'screen and (min-width:1024px) and (max-width:1200px)',
'lg': 'screen and (min-width:1201px) and (max-width:1440px)'
);
#mixin flex_column( $breakpoint ) {
#for $i from 1 through $default__flexColumns {
> .span__#{$breakpoint}--#{$i} {
width: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--offsetLeft-#{$i} {
margin-left: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--offsetRight-#{$i} {
margin-right: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--push-#{$i} {
left: $i/$default__flexColumns * 100%;
}
> .span__#{$breakpoint}--pull-#{$i} {
right: $i/$default__flexColumns * 100%;
}
> .visible__#{$breakpoint} {
display: block !important;
}
> .visible__#{$breakpoint}--flex {
display: flex !important;
}
> .visible__#{$breakpoint}--inline {
display: inline !important;
}
> .visible__#{$breakpoint}--inlineBlock {
display: inline-block !important;
}
> .hidden__#{$breakpoint}--inlineBlock {
display: none !important;
}
}
}
.flex {
display: flex;
margin: 0 -$default__gutter;
padding: 0 $default__gutter;
> *[class^="span__"] {
padding: 0 $default__gutter;
position: relative;
}
#each $breakpoint, $query in $default__breakpoints {
#if $breakpoint == xs {
#include flex_column( #{$breakpoint} )
} #else {
#media #{$query} {
#include flex_column( #{$breakpoint} )
}
}
}
}
There's not really a way to skip just the lines you want because of how the CSS will compile with the brackets present in the #media query var.

Answer 2

You can use map-remove
$default__breakpoints: (
'xs': 'screen and (max-width: 767px)',
'sm': 'screen and (min-width:768px) and (max-width:1023px)',
'md': 'screen and (min-width:1024px) and (max-width:1200px)',
'lg': 'screen and (min-width:1201px) and (max-width:1440px)'
);
.flex {
// ...
$custom_breakpoints: map-remove($default__breakpoints, 'xs');
#each $breakpoint, $query in $custom_breakpoints {
#media #{$query} {
// code
}
}
}
It returns a copy of the map so you don't have to worry about it being removed from your $default__breakpoints variable.
EDIT: I misunderstood your question. You could do that with #at-root although that does add one extra indent:
$default__breakpoints: (
'xs': 'screen and (max-width: 767px)',
'sm': 'screen and (min-width:768px) and (max-width:1023px)',
'md': 'screen and (min-width:1024px) and (max-width:1200px)',
'lg': 'screen and (min-width:1201px) and (max-width:1440px)'
);
.flex {
// ...
#each $breakpoint, $query in $default__breakpoints {
#media #{$query} {
#at-root (with: if($breakpoint == 'xs', rule, all)) {
.selector {
content: 'value';
}
}
}
}
}
will compile to
.flex .selector {
content: "value";
}
#media screen and (min-width:768px) and (max-width:1023px) {
.flex .selector {
content: "value";
}
}
#media screen and (min-width:1024px) and (max-width:1200px) {
.flex .selector {
content: "value";
}
}
#media screen and (min-width:1201px) and (max-width:1440px) {
.flex .selector {
content: "value";
}
}