css - 如何使用带有 html 属性的 LESS？

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 循环在 less 中完成，但对于每个可能的值，输出 css 将只是大量 css。我的建议-如果您已经使用 js 应用内联值，只需将该值应用于样式选择器，如 width 或 translateX() 并相应地设置进度条的样式

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

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