html - 使用类名在 css/less 中动态添加样式

Question

有没有一种方法可以通过传入类名在 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。

如果是这样，请提出建议。

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