如何使用LESS与html属性?

时间:2013-10-27 06:39:31

标签: css less

我有很多进度条,我目前使用内联样式来设置宽度。有没有办法让我利用LESS或CSS只使用数据类型?

例如:

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

我可以在LESS / CSS中做这样的事情:

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

1 个答案:

答案 0 :(得分:3)

无法在css中映射变量属性值。可以使用for循环以较少的方式完成,但输出css对于每个可能的值都只是一吨css。我的建议 - 如果你已经使用js应用了内联值,只需将该值应用于样式选择器(如width或translateX())并相应地设置进度条样式

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

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