更简单的方法来实现CssLess插值 [英] Simpler way to achieve CssLess interpolation

问题描述

我使用Less CSS做了一些插值变量（我认为这是正确的术语），但是我不得不认为我有更多的步骤比我需要。

I'm doing some interpolation of variables with Less CSS (I think thats the correct term), however I can't help but think I've got more steps than I need.

这是我在做什么：

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

...并且我设置了当前主题：

... and I set the current theme like this:

@primaryColor:'blue';

...并且有一些辅助材料可以帮助我检索正确的颜色：

... and have some helper stuff which helps me retrieve the correct color:

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

这使我可以参考 @ primary50 ，它依次返回基于我设置的主题的正确的蓝色（@ blue50）。

This enables me to refer to @primary50, which in turn returns the correct blue color (@blue50) based on the theme I've set.

正如你可以看到有2个帮助步骤，我认为可以简化。但是，我一直无法找出正确的语法使这项工作。这似乎是一个微不足道的措施，但有一百多种颜色和几个主题，所以它是一个长期的方法。

As you can see there are 2 helper steps, which I think could be simplified. However, I've been unable to work out the correct syntax to make this work. It seems like a trivial measure, but there are over a hundred colors and several themes, so it is a bit of a longwinded approach.

第一步，将是简单的步数。

The first step, would be to simply the number of steps.

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

Secondly, if possible, I would like to produce a loop that could take care of all hues in the color. In my example I use the 50 hue, but the full range consists of 50,100,200,300,400,500,600,700,800,900, so that @blue50, @blue100, blue200 etc.

/ * Example OUTPUT * /

/* EXAMPLE OUTPUT */

蓝色的色板

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

设置主题：

@appPrimaryColor:'blue';

对每个色调使用这些帮助变量

Use these helper variables for each hue

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

并使用这些变量访问颜色

And access colors using these variables

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

推荐答案

正如你可以看到有2个帮助步骤，我认为可以简化。

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

要回答此特定问题，请使用以下形式的单行代码：

To answer this particular question, a one-liner equivalent for:

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

（假设值是颜色）可以写成： / p>

(assuming the value is a color) could be written as:

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

但是因为太多的理由不使用这样的代码， snippet本身更像是一个XY问题，对于用例来说，值得考虑替代实现方法（在问题评论中提到了某些提示和示例，虽然它只是太多的影响因素和太多的具体模式，把一切都放到一个单一的答案）。

But since there're too many reasons to not use such code, as well as counting that the whole snippet itself is more like an XY-Problem, it would be worth to consider alternative implementation approaches for the use-case (certain tips and examples are mentioned in the question comments, though it's just too many affecting factors and too many specific patterns to put everything into a single answer).

这篇关于更简单的方法来实现CssLess插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！