在「引號」中使用HTML數據屬性中的LESS變量

Question

我目前正在將代碼從SASS轉換爲LESS。

我有以下行的代碼中的問題：

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

我如何使用變量，並從我的櫃檯VAR減去0.5，並讓它在一對引號，以便它可以在裏面坐HTML數據屬性。

我已經包含了兩個代碼示例，所以你可以把代碼並運行它，看看我的結果。

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 
}