较少-在CSS类上使用变量 [英] LESS - Using a variable on a CSS class

问题描述

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

HTML示例:

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

少有基本思想:

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

CSS输出:

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

之所以要这样做，是因为有多个空图加载器DIV，它们的高度都不同，并且可以节省为每个高度设置不同的CSS类.

任何帮助将不胜感激

解决方案

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 函数).我假设您已经知道什么是可能的高度"值，并将它们存储在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);
}

This is a bit of a long shot, but I wondered if its possible to set a number as part of class and based on that number use it to set the height of the CSS

HTML Example:

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

LESS Basic idea:

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

CSS Output:

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

The idea of this is due to having multiple empty-chart-loader DIVs all of which are different heights, and will save setting up a different CSS class for each height.

Any help will be appreciated

解决方案

LESS is compiled into CSS so its values, after be processed, can't be modified by classes defined in HTML code.

In order to obtain a result similar to one that you're trying to obtain, you must create different CSS classes in advance.

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

This CSS can be automatically generated using the following LESS code, that use LOOPS construct (note also use of EXTRACT function). I'm assuming that you already know what are possible "height" values, and stored them in a LIST. You can simply add more values to list, in order to generate more CSS classes:

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

这篇关于较少-在CSS类上使用变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！