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

时间:2015-04-24 16:40:26

标签: loops variables less

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

// 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 个答案:

没有答案