css - 将变量与字符串连接起来形成另一个变量

Question

@color-purple: "#ffffff"


@colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey;


.ColorsMixin(@i:0) when(@i =< length(@colors)){ //loop over icons array


    @color: extract(@colors, @i); //extract the icon at current index @i

    .color--@{color}{
        background: @{color-@{color}};

        &:before{
            content: "@{color}";
        }

        &:after{
            content: "\@{color-@{color}}";
        }

    }

    .ColorsMixin(@i + 1);
}


.ColorsMixin();

所以，我可以让它做我想做的事情

content: "\@{color-@{color}}";

部分。这将输出

content: "#ffffff";

但是，当我尝试将@color-purple 变量输出为背景时，LESS 会抛出错误。它似乎只有在我用引号括起来时才有效，但背景属性需要十六进制代码而不用引号引起来。

这里有什么技巧？

Answer 1

background: @{color-@{color}}; 

是无效的 Less 语法，正确的应该是:

background: ~'@{color-@{color}}';

但是请注意，通过 escaping 间接引用变量值的想法是一个肮脏的kludge(相当广泛但仍然很脏)。当您将这样的值直接分配给 CSS 属性时它会起作用，但它会失败，因为这样的值不再是颜色而是内容未知的不带引号的字符串......例如。以下代码将失败:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(~'@{color}', 50%); // error, not a color value
}

通过名称获取变量值的正确 Less 方法是 "variable reference" ，例如:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(@@color, 50%); // OK, proper color value
}

---

此外，花点时间考虑将所有这些颜色作为不同的变量然后单独列出这些变量名称的整个方法是否真的是您所需要的。通常，一个同时具有颜色名称和值的列表不会膨胀得那么厉害，而且更易于维护。