尝试在 HSL 函数中使用变量（颜色函数以数字为参数）

Question

我在尝试编译 HSL 函数时遇到此错误：

http://codepen.io/anon/pen/GJVbzB?editors=010

@baseColor: #003459;
@randomVar: `Math.floor(Math.random()*10 + 90).toString()`;
@color: ~"@{randomVar}%";
@new: hsl(hue(@baseColor), @color, @color);

如果我使用 @test 变量，就可以了！这怎么可能，我错了什么？

粗略的是这个函数需要百分比，我必须找到一种方法将 math.random 的结果与“%”连接起来。

Answer 1

你对问题的分析很到位。 hsl() 函数确实需要一个百分比值作为输入。但问题在于您创建百分比输入的方式。

遇到了两个问题，分别是：

您正在使用 .toString() 将数字转换为字符串。这不是必需的。您可以将其完全删除。
第二点要注意的是，您使用字符串连接将随机数转换为百分比。这意味着形成的值是一个字符串，不再是百分比或数字。您可以通过将 @randomVar 与 1% 相乘来避免这种情况，这将自动使其成为一个百分比。

下面的代码片段（已完成这两项更正）应该适合您：

.randomColor() {
    @baseColor: #003459;
    @randomVar: `Math.floor(Math.random()*10 + 90)`;
    @color: @randomVar * 1%;
    @new: hsl(hue(@baseColor), @color, @color);
    @test: 25%;
}

.generate-bg-color(@spanNumber, @i: 1) when (@i =< @spanNumber) {
    span:nth-child(@{i}) {
        .randomColor();
        background-color: @new;
  }
  .generate-bg-color(@spanNumber, (@i + 1));
}
.generate-bg-color(24);

当您将百分比值直接分配给变量时（如 @test: 25%），Less 编译器默认将其视为数字（或百分比）而不是字符串，因此这样做不会导致任何问题。

您还有其他一些选择，其中一个是使用 unit() 答案中提到的 unit() 函数，另一个是使用内置 percentage()功能类似于下面的代码片段。他们都做几乎相同的事情，但我认为乘以 1% 更直观。

.randomColor() {
    @baseColor: #003459;
    @randomVar: `Math.floor(Math.random()*10 + 90)`;
    @color: percentage(@randomVar / 100);
    @new: hsl(hue(@baseColor), @color, @color);
    @test: 25%;
}

.generate-bg-color(@spanNumber, @i: 1) when (@i =< @spanNumber) {
    span:nth-child(@{i}) {
        .randomColor();
        background-color: @new;
  }
  .generate-bg-color(@spanNumber, (@i + 1));
}
.generate-bg-color(24);

Answer 2

你很接近。有一个 function called unit in less 将一个单位附加到变量的内容（如果它们是数字）。

只需删除 .toString() 部分，因为这会将您的数字变成一个字符串，而 unit 只需要数字。

.randomColor() {
    @baseColor: #003459;
    @randomVar: `Math.floor(Math.random()*10 + 90)`;
    @color: unit(@randomVar, %);
    @new: hsl(hue(@baseColor), @color, @color);
    @test: 25%;
}

.generate-bg-color(@spanNumber, @i: 1) when (@i =< @spanNumber) {
    span:nth-child(@{i}) {
        .randomColor();
        background-color: @new;
  }
  .generate-bg-color(@spanNumber, (@i + 1));
}
.generate-bg-color(24);

尝试在 HSL 函数中使用变量（颜色函数以数字为参数）

Trying to use variables in HSL function (color functions take numbers as parameters)

css

variables

hsl

less