Question

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

我有多个输入字段

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

并且每个输入字段都有一个根据数据值属性的背景图像，如下所示：

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缩短这个？

提前谢谢！

Answer 1

有关解决此问题的一些提示，请参阅here和there。一个问题是您不能在attr()中使用url()，因此您需要另一种包含循环的方法。您需要先定义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));
} .-;

LESS：如何使用data-属性实现变量到输入字段

1 个答案: