css - 在 LESS 中对十六进制数学有一个奇怪的观察/结果。为什么会这样？

Question

我刚开始使用 LESS，到目前为止还不错。但是，我遇到了一种特殊情况，其中为背景分配了颜色 (#03A9F4 - 100)。我的直觉加上我对十六进制数的理解，来自大学期间的小 IT(我不是 CS 背景)，显然会让我认为生成的 (CSS) 颜色代码将是 #03A8F4。不过，在我使用的文档中情况并非如此。结果是#004590。

那么，我没有得到什么？

更少的代码

@div-width: 100px;
@color: #03A9F4;

#left{
  width: @div-width;
  background-color: @color - 100;
}

生成的 CSS 代码

#left {
  width: 100px;
  background-color: #004590;
}

Answer 1

我不是完全确定幕后发生的数学运算，但很容易推导出来。

简答:

LESS 按 channel 将数字转换为十进制以执行减法，然后重新转换回十六进制。

长答案:

如果将 100 更改为 #100:

background-color: #03A9F4 - #100

输出是

background-color: #00a9f4;

#100 是 #110000 的简写，因此只有红色 channel 受到影响。

现在，当减去一个数字而不是一个颜色时，LESS 的处理方式有点不同。这次我们也按 channel 分解。

原始颜色:#03A9F4，输出:#004590

红色 03 -> 00

蓝色 A9 -> 45

绿色 F4 -> 90

由于红色 channel 告诉我们的不多，我们将看看其他 channel 。

对于蓝色，十进制的 A9 是 169。减去 100 得到 69。十六进制的 69(十进制)是多少？它是 45。

对于绿色，十进制的F4是244。减去 100 得到 144，即十六进制的 90。