Question

我有一系列变量来生成媒体查询变量

// declare desired media queries
@mediaqueries: 320, 480, 600, 768, 1024, 1280;
@breakpoints: length(@mediaqueries);

我使用上面的变量来设置网格生成，这非常有效。因此，如果我放入另一个值，将生成所需的网格系统css。

另外，对于速度，我选择设置一系列变量来快速输出正确的媒体查询条件。

@320-min : ~'screen and (min-width:' unit(extract(@mediaqueries, 1),px) ~')';
@480-min : ~'screen and (min-width:' unit(extract(@mediaqueries, 2),px) ~')';
@600-min : ~'screen and (min-width:' unit(extract(@mediaqueries, 3),px) ~')';
@768-min : ~'screen and (min-width:' unit(extract(@mediaqueries, 4),px) ~')';
@1024-min : ~'screen and (min-width:' unit(extract(@mediaqueries, 5),px) ~')';
@1280-min : ~'screen and (min-width:' unit(extract(@mediaqueries, 6),px) ~')';

它运行正常，问题是如果我添加新值，删除@mediaqueries变量中的任何值，我会得到错误，因为提取函数会查找一定数量的值。

这不是理想的，因为我无法轻易插入或删除未使用的媒体查询变量。

有没有办法使用less循环根据@mediaqueries变量中设置的值动态生成变量？

类似的东西：

.media-query-loop(@breakpoints, @i: 1) when (@i =< @breakpoints) {
  @mediasize: extract(@mediaqueries, @i);  
    @{mediasize}-min : ~'screen and (min-width:' @{mediasize}px ~')';
  }
  .media-query-loop(@breakpoints, (@i + 1));
}
.media-query-loop(@breakpoints);

由于

以较少的循环动态生成变量

0 个答案: