如何使用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。我的建议 - 如果你已经使用js应用了内联值，只需将该值应用于样式选择器（如width或translateX（））并相应地设置进度条样式

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

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