我有很多进度条,我目前使用内联样式来设置宽度。有没有办法让我利用LESS或CSS只使用数据类型?
例如:
<div class="progress" aria-valuenow="3"></div>
<div class="progress" aria-valuenow="50"></div>
我可以在LESS / CSS中做这样的事情:
.progress[aria-valuenow=x] {
width: x%;
}
答案 0 :(得分:3)
无法在css中映射变量属性值。可以使用for循环以较少的方式完成,但输出css对于每个可能的值都只是一吨css。我的建议 - 如果你已经使用js应用了内联值,只需将该值应用于样式选择器(如width或translateX())并相应地设置进度条样式
<div class="progress" width="x"></div>
.progress {
background: blue;
transition: width 300ms;
}