less.js 可以从 HTML 中读取类名和参数吗？答案

【问题标题】：Can less.js read class names and parameters from HTML?less.js 可以从 HTML 中读取类名和参数吗？
【发布时间】：2013-06-14 21:22:32
【问题描述】：

我刚开始使用LESS，我喜欢它。我现在正在研究使用 LESS 语义创建网格的 grid.less。

这使我能够做这样的事情

//css
.mydiv { .column(9); }

//html
<div class="mydiv"> 9 column wide</div>

我没有研究过less.js，但有没有可能做到以下几点：

//html
<div class="column(9)"> 9 column wide</div>

有什么办法可以做到吗？

【问题讨论】：

不，不是少一个人。无论如何，您不应该在 HTML 中添加演示细节。
我没有看到在 HTML 中将参数传递给 CSS 的任何问题。它减少了我需要编写的 CSS 代码量。现在 SASS/LESS 正在站稳脚跟，我认为这将是朝着正确方向迈出的一步。因此，找出我如何测试它会很好。

标签： jquery css less

【解决方案1】：

LESS 不能轻易地从 HTML 中读取参数，因为 LESS 是一个预处理器（它在 HTML 中呈现任何内容之前处理 CSS）。但是，您可以预构建基本上会做同样事情的类。您只需要设置一个实际的限制，即可能有多少列宽。我在这里的示例是适度的（最多 5 列），但很容易使用变量参数进行更改。它使用 LESS 中的循环结构来构建您想要的最大数量的列类：

少

@numColClasses: 5;

.buildColumnClasses(@colNum) when (@colNum =< @numColClasses) {
  .column@{colNum} {
      .column(@colNum);
  }
  .buildColumnClasses((@colNum + 1));
}
//end loop
.buildColumnClasses(@colNum) when (@colNum > @numColClasses) {}

//start loop
.buildColumnClasses(1);

（伪）CSS 输出

.column1 {
  code-for-columns-at: 1 wide;
}
.column2 {
  code-for-columns-at: 2 wide;
}
.column3 {
  code-for-columns-at: 3 wide;
}
.column4 {
  code-for-columns-at: 4 wide;
}
.column5 {
  code-for-columns-at: 5 wide;
}

在 HTML 中使用就像您注意到的那样

<div class="column5"> 5 column wide</div>

【讨论】：

感谢@scotts 的解释。这就是我现在正在使用的。但是在使用网格时，我看不到 LESS 的好处。因为在使用网格时，您通常不想更改列的宽度。因此，当我仍然需要定义 col1 -> col12 时，我不妨设置宽度而不使用 LESS 来计算它。还是我错过了什么？
像 LESS 这样的预处理器并不是专门为帮助处理“网格”而设计的，而是为了简化 CSS 的生成。所以它确实有助于做到这一点，因为我创建的小代码可以生成 100 级列 CSS 代码，这将是手动输入的一大堆代码。您关于“您通常不想更改宽度”的论点对于您的“参数传递”想法也是有效的——如果宽度通常不会改变，为什么要传递参数？使用 .column() 将 mydiv 宽度设置为您期望的宽度是非常有效的（预处理器与否）。这取决于您是否希望在 HTML 中显示列数。
您仍然需要在 CSS 中定义 100 .column1{ .column(1); }，以便您可以在 html <div class="column76"></div> 中使用它。一列的宽度不会改变（基本列宽度）。但我将根据内容为一个 div 使用不同数量的列。如果我可以传递一个变量，我就不必在我的css中写col1 - col12，因为LESS会用我的变量预处理我的css。我确信将参数从 HTML 传递到 CSS 在其他情况下也很有用。也许我们将来会（或不会）看到这一点。感谢您的意见:)
是的。当您可能只使用一种或两种列大小时，必须在 CSS 中定义所有这些是一个有效的观点。当然，这样的动态交互实际上更像是 javascript 的用途:-)。