在“引号”中使用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 
}