WENIGER - Ersetzen einer Variable in der CSS

Question

Ich habe diese LESS Code, der Längen von 3 bis 25 dauert. Allerdings sollten Eingaben wie 5.1 oder 6.2 und so sein. In der LESS CSS möchte ich es so, dass anstelle von length5.1char .. es ist length5-1char ... als den Punkt mit dem Hypen zu ersetzen.

Hier ist mein Code:

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

WENIGER:

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

LIVE-DEMO: http://codepen.io/anon/pen/XKJqyM

Wenn Sie die CSS Tab gehen und sehen Sie die kompilierte Version, werden Sie sehen Sie, dass es immer noch sagt .length5.1chars, wenn es 012 sagen soll

Answer 1

Ich fand, dass, wenn ich ersetzt:

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

mit diesem:

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

Es funktionierte, weil das die entsprechende Syntax, wenn weniger Variablen mit widersprüchlichen Zeichen beteiligt sind.