Question

我正在使用Less CSS进行一些变量插值（我认为这是正确的术语），但我无法帮助，但我认为我的步骤超出了我的需要。

这就是我正在做的事情：

@blue50:#e3f2fd; // concrete colorways
@green50:#e8f5e9;
@red50:#ffebee;

...我设置了这样的当前主题：

@primaryColor:'blue';

...并且有一些帮助我找回正确颜色的辅助材料：

@primary50:@@_primary50; // It feels like these 2 lines should be 1!
@_primary50:'@{appPrimaryColor}50';

这使我能够引用@primary50，而@blue50:#e3f2fd; @blue100:#bbdefb; @blue200:#90caf9; @blue300:#64b5f6; @blue400:#42a5f5; @blue500:#2196f3; @blue600:#1e88e5; @blue700:#1976d2; @blue800:#1565c0; @blue900:#0d47a1;又会根据我设定的主题返回正确的蓝色（@ blue50）。

正如您所看到的，有两个辅助步骤，我认为可以简化。但是，我一直无法找到正确的语法来完成这项工作。这似乎是一个微不足道的措施，但有超过一百种颜色和几个主题，所以这是一个漫长的方法。

第一步，就是简单的步骤数。

其次，如果可能的话，我想制作一个可以处理颜色中所有色调的循环。在我的例子中，我使用50色调，但全范围包括50,100,200,300,400,500,600,700,800,900，所以@ blue50，@ blue100，blue200等。

/ *示例输出* /

用于＆＃39;蓝色＆＃39;

的样本

@appPrimaryColor:'blue';

设置主题：

@primary50:@@_primary50;
@_primary50:'@{appPrimaryColor}50';

为每个色调使用这些辅助变量

@primary50:@@_primary50;
@primary100:@@_primary100;
@primary200:@@_primary200;
@primary300:@@_primary300;
@primary400:@@_primary400;
@primary500:@@_primary500;
@primary600:@@_primary600;
@primary700:@@_primary700;
@primary800:@@_primary800;
@primary900:@@_primary900;

使用这些变量访问颜色

.mystyle1 {
    color:@primary50;
}
.mystyle2 {
    color:@primary100;
}

并使用样式表

getA(){

Answer 1

正如您所看到的，有两个辅助步骤，我认为可以简化。

要回答这个特殊问题，可以使用单行代码：

@primary50: @@_primary50;
@_primary50: '@{appPrimaryColor}50';

（假设值是一种颜色）可以写成：

@primary50: color("@{@{appPrimaryColor}50}");

但是由于有太多理由不使用此类代码，并且计算整个代码片段本身更像是XY问题，因此考虑替代实现方法是值得的对于用例（问题评论中提到了某些提示和示例，尽管影响因素太多，而且将所有内容都放在一个答案中的具体模式太多）。

更简单的方法来实现CssLess插值

1 个答案: