Question

这是一个很长的镜头，但我想知道是否可以将number设置为class的一部分，并根据该数字使用它来设置height CSS

HTML示例：

<div class="div-height-100"></div>

缺乏基本理念：

.div-height-@var{
    height: @height;
}

CSS输出：

.div-height-100 {
    height: 100px;
}

这个想法是由于有多个空图表加载器DIV都是不同的高度，并且将为每个高度节省设置不同的CSS类。

任何帮助将不胜感激

Answer 1

LESS被编译成CSS，因此在处理之后，它的值不能被HTML代码中定义的类修改。

为了获得与您尝试获得的结果类似的结果，您必须提前创建不同的CSS类。

.div-height-100 {
  height: 100px;
}
.div-height-200 {
  height: 200px;
}
.div-height-300 {
  height: 300px;
}
.div-height-400 {
  height: 400px;
}

可以使用以下LESS代码自动生成此CSS，该代码使用LOOPS构造（请注意使用EXTRACT函数）。我假设你已经知道什么是可能的“高度”值，并将它们存储在列表中。您可以简单地向列表中添加更多值，以生成更多CSS类：

//Possible height values
.div-heights(100, 200, 300, 400);

.generate-heights-loop(@var; @possible-values) when (@var <= length(@possible-values)) 
{
  //Let's extract values in @var position from list @possible-values
  @height: extract(@possible-values, @var);

  .div-height-@{height} 
  {
    height: unit(@height,px);
  }

  .generate-heights-loop((@var + 1), @possible-values);
}

.div-heights(@possible-values...) 
{
  .generate-heights-loop(1, @possible-values);
}

LESS - 在CSS类上使用变量

1 个答案: