SASS @each пропустить определенные строки, если переменная существует

Question

Я пытаюсь построить систему сетки, используя SASS, и пока все хорошо, однако, если точка останова равна 'xs', я бы хотел пропустить строки @media #{$query} { и } для этого, поскольку xs больше не нужен медиазапрос.

Может кто-нибудь посоветовать?

$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

Вы можете использовать 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
        }
    }
}

Возвращает копию карты, поэтому вам не нужно беспокоиться об ее удалении из переменной $default__breakpoints.

---

РЕДАКТИРОВАТЬ: Я неправильно понял ваш вопрос. Вы можете сделать это с помощью @at-root, хотя это добавляет один дополнительный отступ:

$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';
        }
      }
    }
  }
}

скомпилируется в

.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";
  }
}

Answer 2

Обновлено для использования @mixin.

Вы можете использовать директиву @if для проверки значения $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} )
        }
    }
    }
}

На самом деле нет способа пропустить только нужные строки из-за того, как CSS будет компилироваться с помощью скобок, представленных в переменной запроса @media.