Как использовать LESS с атрибутами html?

Question

У меня есть много индикаторов выполнения, которые я в настоящее время использую встроенный стиль для установки ширины. Есть ли способ использовать тип данных с LESS или просто CSS?

Например:

<div class="progress" aria-valuenow="3"></div> 
<div class="progress" aria-valuenow="50"></div> 

Могу ли я сделать что-то подобное в LESS/CSS:

.progress[aria-valuenow=x] { 
    width: x%; 
} 

Answer 1

невозможно отобразить значение переменной атрибута в CSS. можно сделать меньше, используя цикл for, но вывод css будет просто тонной css для каждого возможного значения. мой suggestion- если Youre уже применяя инлайн значения с помощью JS, просто применить это значение для выбора стиля, как ширина или translateX() и стиль Youre прогресс баров соответственно

<div class="progress" width="x"></div> 

.progress { 
    background: blue; 
    transition: width 300ms; 
}