具有最小和最大宽度以及大小对象的sass媒体查询

我是sass的初学者（10分钟的经验）

我已经构建了一个基本网格

\u grid.scss

该文件的内容如下：

$gutter  : 0 15px;
$columns : 12;
$sizes: (
  sm: 0,
  md: 640px,
  lg: 1024px,
  xl: 1200px,
  xxl: 1440px,
);

.container{
    max-width: 1200px;
    width: 100%;
    padding: $gutter;
}
.container.fluid{
    max-width:none;
}

.row:before, 
.row:after {
    content:' ';
    display: table ;
     clear:both;
}

.col{
    width: 100%;
    float: left;
    padding: $gutter;
}

.col:after{
    content:'.';
    visibility: hidden;
}

@each $size,$breakpoint in $sizes{

    @media screen and (min-width: $breakpoint) {

        @for $i from 1 through $columns{

            .col.#{$size}-#{$i}{
                width: percentage($i/$columns);
            }

        }

    }

}

它根据

$columns

的数量输出一个理想的网格

我现在想做的是将媒体查询更改为同时使用最小宽度和最大宽度，我很难弄清楚如何更改大小对象以存储最小宽度和最大宽度，然后进行迭代

我的基本想法是这样做：

$sm : 0px 639px;
$md : 640px 1023px;
$lg : 1024px 1199px;
$xl : 1200px 1439px;
$xxl: 1440px 4000px;

$sizes: (
  sm: $sm,
  md: $md,
  lg: $lg,
  xl: $xl,
  xxl: $xxl,
);

---

但若我这样做了，我将不知道如何在每个循环的

$breakpoint

变量中选择变量。我会对最小宽度使用

$breakpoint[0]

，对最大宽度使用

$breakpoint[1]

吗？

我能够回答我自己的问题**要从列表中选择索引，请使用

nth

函数，其签名如下：

nth（$list，$index）

fwiw，索引基于1（怪异）

我唯一需要做的更改是更改

$size

对象，如下所示：

$sm : 0px , 639px;
$md : 640px, 1023px;
$lg : 1024px, 1199px;
$xl : 1200px, 1439px;
$xxl: 1440px, 4000px;

$sizes: (
  sm: $sm,
  md: $md,
  lg: $lg,
  xl: $xl,
  xxl: $xxl,
);

以及媒体查询，以便：

@media screen and (min-width: nth($breakpoint,1)) and (max-width: nth($breakpoint,2))

普雷斯托，很有魅力。希望其他人会觉得这很有用