Как использовать @each в mix включает в себя Sass?

Question

Я пытаюсь динамически генерировать свой @include, а также динамически вставлять @content, чтобы мне не приходилось повторять код ..

Однако я получаю следующую ошибку, описанную ниже, и я хотел бы знать, что я делаю неправильно, и если это возможно сделать с помощью include, или я должен ввести все имена переменных вручную.

$ node-sass scss/_sixbase-grid.scss ../app/src/public/css/sixbase-grid.min.css --output-style expanded
{
  "status": 1,
  "file": "C:/Users/THIAGOSAAD/Documents/DEVELOPMENT/SIXBASE/PERSONAL PROJECTS/githubcompare/build/scss/_sixbase-grid.scss",
  "line": 40,
  "column": 12,
  "message": "no mixin named media-",
  "formatted": "Error: no mixin named media-\n        on line 40 of scss/_sixbase-grid.scss\n>>   @include media-#{$media-key} {\n\n   -----------^\n"
}
error Command failed with exit code 1.

SIXBASE-GRID.SCSS

/*!
 * Sixbase Flexbox v1.0.0 (https://sixbase.tech/)
 * Copyright 2019 Sixbase.
 * Licensed under GNU General Public License v3.0 (https://github.com/sixbase-tech/githubcompare/blob/master/LICENSE)
 */

@import './mixins/media-queries';

$container-map: (
  flex:   ( display: flex ), 
  inline: ( display: inline )
);

$flex-direction-map: (
  row:            ( flex-direction: row ),
  row-reverse:    ( flex-direction: row-reverse ),
  column:         ( flex-direction: column ),
  column-reverse: ( flex-direction: column-reverse )
);

$media-map: (
  smartphone-xs: ( type: 'xs' ), 
  smartphone-sm: ( type: 'sm' ), 
  tablet-md:     ( type: 'md' ), 
  tablet-lg:     ( type: 'lg' ), 
  desktop:       ( type: 'xl')
);

* {
  &::before,
  &::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}


@each $media-key in $media-map {
  @include media-#{$media-key} {
   @each $display-key, $display-type in $container-map {
       .container-#{map-get($map: $media-key, $key: type )}-#{$display-key} { 
         display: map-get($map: $display-type, $key: display ); 
       }
     }
  }
}

MEDIA_QUERIES.SCSS

$xs-width: 320px;
$sm-width: 576px;
$md-width: 768px;
$lg-width: 992px;
$xl-width: 1200px;

@mixin media-smartphone-xs {
    @media only screen and (min-width: $xs-width) {
        @content;
    }
}

@mixin media-smartphone-sm {
    @media only screen and (min-width: $sm-width) {
        @content;
    }
}

@mixin media-tablet-md {
    @media only screen and (min-width: $md-width) {
        @content;
    }
}

@mixin media-tablet-lg {
    @media only screen and (min-width: $lg-width) {
        @content;
    }
}

@mixin media-desktop {
    @media only screen and (min-width: $xl-width) {
        @content;
    }
}

Answer 1

Проблема здесь: @include media-#{$media-key} {...}, потому что вы не можете использовать интерполяцию в @mixin.См. Этот пост, очень ясно об этой проблеме : Как определить динамический миксин или имя функции в SASS?

Итак, мы должны использовать другой способ,Решением может быть создание общего миксина и работа с его аргументами.Примерно так:

@mixin general-media($width){
  @media only screen and (min-width: $width) {
    @content;
  }
}

После этого я решил добавить ваши значения ширины в $media-map map и использовать их с этим миксином (я пытался использовать ваш код):

$media-map: (
  smartphone-xs: ( type: 'xs', width: $xs-width ), 
  smartphone-sm: ( type: 'sm', width: $sm-width ), 
  tablet-md:     ( type: 'md', width: $md-width ), 
  tablet-lg:     ( type: 'lg', width: $lg-width ), 
  desktop:       ( type: 'xl', width: $xl-width )
);

И это ваш цикл с некоторыми изменениями:

@each $media-key, $media-type in $media-map {
  @include general-media(map-get($media-type, 'width')) {
   @each $display-key, $display-type in $container-map {
       .container-#{map-get($media-type, 'type' )}-#{$display-key} { 
         display: map-get($map: $display-type, $key: display ); 
      }
    }
  }
}

Это весь код в действии:

/* MEDIA_QUERIES.SCSS */

$xs-width: 320px;
$sm-width: 576px;
$md-width: 768px;
$lg-width: 992px;
$xl-width: 1200px;

@mixin general-media($width){
  @media only screen and (min-width: $width) {
    @content;
  }
}

/* SIXBASE-GRID.SCSS */

$container-map: (
  flex:   ( display: flex ), 
  inline: ( display: inline )
);

$flex-direction-map: (
  row:            ( flex-direction: row ),
  row-reverse:    ( flex-direction: row-reverse ),
  column:         ( flex-direction: column ),
  column-reverse: ( flex-direction: column-reverse )
);

$media-map: (
  smartphone-xs: ( type: 'xs', width: $xs-width ), 
  smartphone-sm: ( type: 'sm', width: $sm-width ), 
  tablet-md:     ( type: 'md', width: $md-width ), 
  tablet-lg:     ( type: 'lg', width: $lg-width ), 
  desktop:       ( type: 'xl', width: $xl-width )
);

* {
  &::before,
  &::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@each $media-key, $media-type in $media-map {
  @include general-media(map-get($media-type, 'width')) {
   @each $display-key, $display-type in $container-map {
       .container-#{map-get($media-type, 'type' )}-#{$display-key} { 
         display: map-get($map: $display-type, $key: display ); 
      }
    }
  }
}

Вывод:

*::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media only screen and (min-width: 320px) {
  .container-xs-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-xs-inline {
    display: inline;
  }
}

@media only screen and (min-width: 576px) {
  .container-sm-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-sm-inline {
    display: inline;
  }
}

@media only screen and (min-width: 768px) {
  .container-md-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-md-inline {
    display: inline;
  }
}

@media only screen and (min-width: 992px) {
  .container-lg-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-lg-inline {
    display: inline;
  }
}

@media only screen and (min-width: 1200px) {
  .container-xl-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-xl-inline {
    display: inline;
  }
}