LESS CSS - 添加百分比到十六进制颜色 - 这是如何工作的？

Question

假设有一个 LESS 变量以十六进制表示 CSS 颜色

\n\n

@primary-color: #0070B8;\n

\n\n

在 LESS 代码的其他地方，@primary-color 的操作如下。

\n\n

@new-color: @primary-color + 10%;\n

\n\n

@新颜色是#0a7ac2。

\n\n

LESS 是如何得出新颜色的？ 我尝试查看@primary-color 与 @new-color的 rgb 和 hsl 版本，但我没有看到这些值在任何比例下有 10% 的差异。看起来它为十六进制颜色的R/G/B 分量添加了绝对值 10 ，但这似乎违反直觉。（我认为 SASS 的工作原理类似。）

\n\n

#0070B8\n0,112,184\n(0,112,184)\nrgb(0,112,184)\nrgb(0%,44%,72%)\nhsl(203\xc2\xb0 100% 36%)\n\n#0a7ac2\n10,122,194\n(10,122,194)\nrgb(10,122,194)\nrgb(4%,48%,76%)\n203\xc2\xb0 90% 40%\n

\n\n

（编辑：我没有编写这个 LESS 代码。我在一个存储库中看到了它，我试图弄清楚它是如何工作的，因为我在 LESS 文档中找不到任何解释在 + 中使用百分比时的内容操作。粗体文本是由其他用户添加的。）

\n

Answer 1

请参阅语言功能 > 概述 > 操作。

假设它实际上是这样的@new-color: @primary-color + 10%;（只是你 Q 中的一个拼写错误）：=

• 如果算术表达式的第一个操作数是颜色，则任何后续操作数也会转换为颜色。
• 标量数值（例如10%）被转换为颜色，如value-> rgb(value, value, value)。即10%转换为rgb(10, 10, 10)颜色值（在这种情况下无关紧要，对于、等%来说是相同的）1010px10whatever
• 算术运算适用于每个 RGB 通道的颜色操作数。

总结来说就是：

#0070b8 -> rgb(0, 112, 184)
10%     -> rgb(10, 10, 10)

rgb(0, 112, 184) + rgb(10, 10, 10) ->
rgb(0 + 10, 112 + 10, 184 + 10) ->
rgb(10, 122, 194)

rgb(10, 122, 194) -> #0a7ac2

或者换句话说，#0070B8 + 10只是结果的#0070b8 + #0a0a0a简写#0a7aC2。（同样，%单位在那里没有任何影响，应该删除以使其不那么混乱）。

回答：

看起来它为十六进制颜色的 R/G/B 分量添加了绝对值 10，但这似乎违反直觉。

请参阅严格单位。基本上它与例如相同10px + 10%，它将导致20px（而不是10px + 10px * 0.1）。同样，CSScalc(10px + 10%)不等于，(10px + 10px * 0.1)尽管 Less 算术表达式不等于calcToo 的算术表达式，因为编译器没有关于浏览器当前元素状态的所有信息。

是的，%算术是 Less 中的典型混淆，但请注意，CSS 中的百分比值始终引用其他地方设置的值，并且永远不会被视为某种“比率值”。例如width: 50%->50% of the container width并且它不等于width: 0.5或什么。因此，在 Less 中，您永远不会假设10%算术表达式可以引用同一表达式的某些先前值和/或隐式转换为无单位比率（例如，它永远不会10%-> 0.1）。