Question

我有一大堆表示颜色的变量。例如，@Yellow-100是浅黄色，@Purple-900是深紫色。

我有一个@Page-Background变量，它当前直接指向@Yellow-100，还有其他几个指向其他各种黄色阴影的变量。

@Page-Background: @Yellow-100;

...但我想在整个应用程序中设置基色以便我可以轻松地在不同颜色之间切换，而无需重命名所有这些变量。因此，我定义了以下变量：

@Base: Yellow;

我已阅读LESS's Variables documentation，但它没有提及如何使用变量和字符串引用另一个变量。 @@Base会引用@Yellow，但@@Base-100不会引用@Yellow-100;也不是@@{Base}-100或@{@Base}-100。

如何通过将@Page-Background替换为@Yellow-100，将Yellow变量指向我的@Base变量？

Answer 1

这里有两件事需要解决：

当我们为变量指定颜色名称时，默认情况下，Less会将其转换为早期版本的编译器中的hex值，因此最好使用引号内的值来实现它字符串而不是颜色。此问题has now been addressed如果您使用较新版本的Less编译器，则可能不需要此步骤。
我们必须通过将数字连接到@Base变量的值来形成派生变量的名称，然后对其进行评估。

将两者放在一起，下面的代码应该有效：

@Yellow-100: #fff;

@Page-Background: ~"@{Base}-100"; /* this will form the variable name */
@Base: "Yellow";

a{
    background: @@Page-Background; 
    /*using double @ references the variable whose name is contained in @Page-Background */
}

连接变量和字符串以引用LESS中的另一个变量

1 个答案: