Question

我是萨斯的初学者（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]吗？

Answer 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，就像一个魅力。希望其他人觉得这很有用。

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

1 个答案: