LESS - 替换 CSS 中的变量

Question

我有这个LESS代码，它的长度从3到25。但是，输入应该像5.1或6.2之类的。在LESS CSS 中，我希望它而不是length5.1char..这是length5-1char...至于用连字符替换点。

这是我的代码：

<h2>5.1</h2>
<div class="length5-1chars">
  Width...
</div>
<p>The above bar should be much, much shorter.</p>
<h2>20</h2>
<div class="length20chars">
  Hello
</div>
<h2>15</h2>
<div class="length15chars">
  Hello
</div>
<h2>10</h2>
<div class="length10chars">
  Hello
</div>

少：

@fieldLengths: 3, 4, 5, 5.1, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25;
// mixin to iterate over colors and create CSS class for each one
.make-field-lengths(@i: length(@fieldLengths)) when (@i > 0) {
    .make-field-lengths(@i - 1);
    @fieldLength: extract(@fieldLengths, @i); 
    @name: replace(~"@{fieldLength}", "/^d+.d+$/i", "-");
    .length@{name}chars {
        @newWidth:  floor(@fieldLength * 7 + 10);
        width: ~"@{newWidth}px";
      }
}
.make-field-lengths();
div {
  background: #cacaca;
  border: 2px solid black;
  margin-down: 15px;
}

现场演示：http://codepen.io/anon/pen/XKJqyM

如果您转到CSS选项卡并查看编译版本，您将看到它仍然显示.length5.1chars，而它应该显示.length5-1chars

Answer 1

我发现如果我替换：

@name: replace(~"@{fieldLength}", "/^d+.d+$/i", "-");

有了这个：

@name: ~`"@{fieldLength}".replace(/./i, '-')`;

它之所以有效，是因为当 LESS 变量涉及冲突字符时，这是适当的语法。