实现 CssLess 插值的更简单方法答案

【问题标题】：Simpler way to achieve CssLess interpolation实现 CssLess 插值的更简单方法
【发布时间】：2016-02-23 00:27:50
【问题描述】：

我正在使用 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;
}

【问题讨论】：

问题的第一部分很容易处理，但这一点是不可能的，因为你不能动态形成变量名 - 在我的例子中，我使用 50 色相，但全范围由 50,100,200,300,400,500,600,700,800,900 组成，所以 ...。但是根据输出 CSS 应该如何，也许可以使用循环。如果您显示预期的 CSS 输出，我可以建议一种方法。
看起来像一个“XY 问题”。您能否提供更多关于您需要这些变量的详细信息？
@Harry - 提供一个很好的例子并不容易，因为它只是基于临时变量的转换，但我添加了一个如何使用它的示例。
@seven-phases-max - 我正在根据 Google 的材料设计创建一个网站模板。有 22 个调色板，每个都有 10 种色调 - 每个都有“颜色 + 色调”的命名约定，所以 blue50、blue100 等。我希望能够设置颜色“蓝色”并让 Less 计算价值观。然后可以在整个 css 中以“@primary50”或“@primary100”的形式访问它们，这样我就可以在一个地方更改主题而无需引用整个样式表。
@JohnOhara：在那种情况下，做类似this而不是动态形成变量名不是很容易吗？

标签： css less

【解决方案1】：

如您所见，有 2 个辅助步骤，我认为可以简化。

要回答这个特定的问题，单行等效于：

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

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

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

但由于不使用此类代码的理由太多，而且考虑到整个 sn-p 本身更像是一个 XY 问题，因此值得考虑替代实现方法 em> 用于用例（问题 cmets 中提到了某些提示和示例，尽管影响因素和特定模式太多，无法将所有内容放在一个答案中）。

【讨论】：