Использование LESS-переменных в атрибуте данных HTML в "quotes"

Question

В настоящее время я конвертирую код из SASS в LESS.

У меня есть проблемы с помощью следующей строки кода:

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

Как я могу работать с переменными и вычитать 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; 
     } 
    } 
    } 
} 

МИНУС:

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