使用类名

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

Answer 2

否

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

实现与此类似的东西的唯一方法是使用javascript（OP说他们现在想要使用）。