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> 

LESS：

@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

あなたはCSS]タブに移動し、コンパイルされたバージョンを表示した場合、あなたは意志それを参照してくださいまだは012と言うべきであるとき.length5.1charsと言うこれで

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

を：：

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

ことがLESS変数が矛盾する文字が関与している適切な構文であるため、それが働いた

Answer 1

は私が交換した場合ことがわかりました。