LESS：如何使用数据属性实现输入字段的变量答案

【问题标题】：LESS : How to implement variable to input field with data- attributeLESS：如何使用数据属性实现输入字段的变量
【发布时间】：2018-05-06 19:55:04
【问题描述】：

我是 LESS 的新手，我不知道如何将变量应用于具有特定数据属性的输入字段。这是我的问题：

我有多个输入字段

<input type=“text” data-value=“white” />
<input type=“text” data-value=“yellow” />
<input type=“text” data-value=“red” />

每个输入字段都有一个根据data-value属性的背景图，像这样：

input[data-value=“white”]{
    background-image: url(“../images/white.svg”);
}
input[data-value=“yellow”]{
    background-image: url(“../images/yellow.svg”);
}
input[data-value=“red”]{
    background-image: url(“../images/red.svg”);
}

如何用 LESS 缩短它？

提前谢谢你！

【问题讨论】：

Loop through array of variable names in Less的可能重复
因此正确的副本是stackoverflow.com/questions/22492261、stackoverflow.com/questions/24626408、stackoverflow.com/questions/20954762、stackoverflow.com/questions/20369614等等。
奇怪的是，“循环遍历变量名数组”在涉及这类事情时似乎是相当流行的话题，尽管它是一个错误解决方案。通常只需要遍历值，而不是遍历变量的名称。 – 七阶段 - 最多 23 分钟前

标签： less

【解决方案1】：

有关解决此问题的一些提示，请参阅 here 和 there。一个问题是您不能只在url() 中使用attr()，因此您需要另一种包含循环的方法。您需要在之前为data-value 定义所有可能的值。

@colors: "green", "red", "blue";

.-(@i: length(@colors)) when (@i > 0) {
    @name: extract(@colors, @i);
    input[data-value="@{name}"] {
        background-image:url("../images/@{name}.svg");
    }
    .-((@i - 1));
} .-;

【讨论】：