较少的CSS – 将一个百分比添加到十六进制颜色 – 这是如何工作的？

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

@primary-color: #0070B8;

在LESS代码的其他地方,@ primary-color就像这样操作.

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

@ new-color是#0a7ac2.

LESS是如何获得新颜色的？我尝试查看@ primary-color与@ new-color的rgb和hsl版本,但我没有看到这些值在任何比例上都有10％的差异.看起来它为十六进制颜色的R / G / B分量添加了绝对值10,但这似乎与直觉相反. (我认为SASS的工作方式类似.)

#0070B8
0,112,184
(0,112,184)
rgb(0,112,184)
rgb(0%,44%,72%)
hsl(203° 100% 36%)

#0a7ac2
10,122,194
(10,122,194)
rgb(10,122,194)
rgb(4%,48%,76%)
203° 90% 40%

(编辑：我没有写这个LESS代码.我在回购中看到它,我试图弄清楚它是如何工作的,因为我在LESS文档中找不到任何解释它在操作中使用时的百分比的内容.其他用户添加了粗体文字.)

见 Language Features > Overview > Operations.

假设它实际上是@ new-color：@ primary-color 10％; (和=只是你Q中的拼写错误)它是这样的：

>如果算术表达式的第一个操作数是一种颜色,则任何后续操作数也会转换为颜色.
>标量数值(例如10％)被转换为颜色值 – > rgb(值,值,值).即10％转换为rgb(10,10,10)颜色值(％在这种情况下无关紧要,10,10px,10whatever等相同)
>算术运算适用于基于每个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结果. (然而％单位在那里没有任何影响,应该删除,以减少混乱).

回答：

It looks like it added an absolute value of 10 to the R/G/B component of the hex color, but that seems counter-intuitive.

见Strict Units.
基本上它与10px 10％相同,例如,它将导致20px(而不是10px 10px * 0.1).同样的方式CSS calc(10px 10％)不等于(10px 10px * 0.1)尽管较少的算术表达式也不等于calc的表达式,因为编译器没有关于浏览器当前元素状态的所有信息.

是的,％算术是Less中的典型混淆,但请注意,CSS中的百分比值总是指其他地方设置的值,并且从不被视为某种“比率值”.例如.宽度：50％ – >容器宽度的50％,它不等于宽度：0.5或者其他东西.因此,在Less中,你永远不会假设算术表达式中的10％可以引用相同表达式的某个先前值和/或隐式转换为无单位比率(例如,它永远不是10％ – > 0.1).