css - 更简单的实现CssLess插值的方法

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)。

如您所见，有 2 个辅助步骤，我认为可以简化。但是，我一直无法计算出正确的语法来完成这项工作。看似微不足道的措施，却有百余种颜色和多种主题，显得有些啰嗦。

第一步，简单地计算步数。

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

/* 示例输出 */

“蓝色”色板

@blue50:#e3f2fd;
@blue100:#bbdefb;
@blue200:#90caf9;
@blue300:#64b5f6;
@blue400:#42a5f5;
@blue500:#2196f3;
@blue600:#1e88e5;
@blue700:#1976d2;
@blue800:#1565c0;
@blue900:#0d47a1;

设置主题:

@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;
}

Answer 1

As you can see there are 2 helper steps, which I think could be simplified.

要回答这个特定问题，一行等价于:

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

(假设值是一种颜色)可以写成:

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

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