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

【问题标题】：sass media queries with min and max width and an object of sizes具有最小和最大宽度以及大小对象的 sass 媒体查询
【发布时间】：2016-07-27 07:26:15
【问题描述】：

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

我已经建立了一个基本的网格_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]吗？

【问题讨论】：

标签： sass

【解决方案1】：

我能够回答我自己的问题。 **要从列表中选择索引，请使用nth 函数，它的签名如下：

nth($list,$index) fwiw，索引是从 1 开始的（奇怪）。

我必须做的唯一更改是更改 $sizes 对象，如下所示：

$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))

presto，就像一个魅力。希望其他人觉得这很有用。

【讨论】：