LESS

Question

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

HTML 示例：

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

LESS 基本思想：

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

CSS 输出：

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

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

任何帮助将不胜感激

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;
}

此 CSS 可以使用以下 LESS 代码自动生成，该代码使用 LOOPS construct (note also use of EXTRACT 函数）。我假设您已经知道可能的 "height" 值，并将它们存储在 LIST 中。您可以简单地向列表中添加更多值，以生成更多 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 class 上使用变量

LESS - Using a variable on a CSS class