"引用符"のHTMLデータ属性でLESS変数を使用

Question

現在、SASSからLESSにコードを変換しています。私はそれが内側に座ることができるように、引用符のペアで変数と協力し、私のカウンターVARから0.5を減算し、それを持つことができますどのように

&[data-rating = "@{counter - 0.5}"] { // THIS DOES NOT WORK 

：

は、私は次のコード行に問題がありますHTMLデータ属性。

2つのコード例が含まれているので、コードを実行して結果を確認することができます。

SASS：

.reviews-stars { 
    display: inline-block; 

    @for $i from 1 through 5 { 
    &[data-rating = "#{$i}"] { 
     .star:nth-child(-n + #{$i}):before { 
     color: green; 
     } 
    } 

    &[data-rating = "#{$i - 0.5}"] { 
     .star:nth-child(-n + #{$i}):before { 
     color: red; 
     } 
    } 
    } 
} 

LESS：

.looper-review-stars(@counter) when (@counter > 0) { 

    .looper-review-stars((@counter - 1)); // next iteration 

    &[data-rating = "@{counter}"] { // THIS WORKS 
    .star:nth-child(-n + @{counter}):before { // THIS WORKS 
     color: green; 
    } 
    } 

    // THIS DOES NOT WORK IT RETURNS THE STRING "@{counter - 0.5}" 
    &[data-rating = "@{counter - 0.5}"] { // THIS DOES NOT WORK 
    .star:nth-child(-n + @{counter}):before { // THIS WORKS 
     color: red; 
    } 
    } 
} 

.reviews-stars { 
    display: inline-block; 
    .looper-review-stars(5); // launch the loop 
} 

Answer 1

あなたは以下のスニペットのように一時的な変数を使用してそれを行うことができます。セレクタは文字列なので、すべての数学演算を別のステートメントから離しておく方がよいと思います。

.looper-review-stars(@counter) when (@counter > 0) { 

    .looper-review-stars((@counter - 1)); // next iteration 

    &[data-rating = "@{counter}"] { 
    .star:nth-child(-n + @{counter}):before { 
     color: green; 
    } 
    } 

    @temp: @counter - .5; /* temporary variable */ 
    &[data-rating = "@{temp}"] { 
    .star:nth-child(-n + @{counter}):before { 
     color: red; 
    } 
    } 
} 

.reviews-stars { 
    display: inline-block; 
    .looper-review-stars(5); // launch the loop 
}