【问题标题】：Dynamically add styles in css/less by using class name使用类名在 css/less 中动态添加样式
【发布时间】：2017-12-22 01:15:06
【问题描述】：

有没有一种方法可以通过传入类名来动态地在 css/less 文件中添加样式？

例如：

<div class="xyz_20"></div>
<div class="xyz_40"></div>

而不是写：

.xyz_20 {width:20px;} .xyz_40 {width:40px;}

有没有一种方法可以让我编写单个类 .xyz_i 并根据 i 值自动添加宽度，例如 .xyz_i {width: i px;}` 而不涉及 javascript。

如果是，请提出建议。

【问题讨论】：

不，但作为一种解决方法，您可以写<div style="width:20px"></div>。那么你甚至不需要写类名！
感谢李斯特先生的评论。我实际上是在尝试避免内联样式。只是想根据提供的数字找出一个类可以容纳许多 div 的方法。
如果您要对您的用例多说一些，您可能会得到一些有用的建议，帮助您了解如何做您想做的事情。
@vlasits 我有多个不同宽度的 div。我想为所有 div 编写一个通用类。并根据类名应用样式。如果类名是 xyz_20，我想给那个 div 添加 20px 的宽度等等
这是stackoverflow.com/questions/27097530、stackoverflow.com/questions/40993082等的副本

标签： html css less

【解决方案1】：

据我所知，这是不可能的，但这是内联样式的一个很好的用例：

<div class="xyz" style="width:20px"></div>

如果你想支持有限个宽度，那么你可以使用递归来生成类：

.widthgen(@count) when (@count > 0) {
  .widthgen((@count - 10));
  .xyz_@{count} {
    background-color: red;
    width: @count * 1px;
  }
}

.widthgen(50);

输出：

.xyz_10 {
  background-color: red;
  width: 10px;
}
.xyz_20 {
  background-color: red;
  width: 20px;
}
.xyz_30 {
  background-color: red;
  width: 30px;
}
.xyz_40 {
  background-color: red;
  width: 40px;
}
.xyz_50 {
  background-color: red;
  width: 50px;
}

列表插件

如果您想要支持的宽度不容易以线性模式捕获，您可以使用lists 插件（安装：npm install -g less-plugin-lists）：

@widths: 10, 20, 40, 50;

.for-each(@i in @widths) {
    .xyz_@{i} {
        background-color: red;
        width: @i * 1px;
    }
}

你可以编译：

lessc --lists in.less out.css

你会得到：

.xyz_10 {
  background-color: red;
  width: 10px;
}
.xyz_20 {
  background-color: red;
  width: 20px;
}
.xyz_40 {
  background-color: red;
  width: 40px;
}
.xyz_50 {
  background-color: red;
  width: 50px;
}

【讨论】：

感谢格雷格的回答。我实际上是在尝试避免内联样式。只是想根据提供的数字找出一个类可以容纳许多 div 的方法
@Sandy_22 我想知道列表是否会对您有所帮助。我将这些添加到我的答案中。
@Sandy_22，我还添加了递归，它允许您生成类而无需使用列表插件。
正如你所提到的，它适用于有限数量的宽度，这很棒！有没有办法为无限宽度添加类。例如，使用上面的例子，我必须写类 50，请建议
@Sandy_22 因为 less 最终会被编译成 CSS，所以这是不可能的，因为这会导致 CSS 文件无限大。

【解决方案2】：

没有。

没有办法编写类并期望浏览器从中推断出含义。

完成类似事情的唯一方法是使用 javascript（OP 说他们现在确实想使用）。

【讨论】：

我认为这应该是公认的答案。它会让未来在谷歌上搜索您的问题的人得到答案。
我认为如果您提供有用的替代方案，您的答案会更好。
确实如此。因此，您当前的答案更好。