SASS/SCSS - 十六进制颜色数学计算答案

【问题标题】：SASS/SCSS - Hex Colors Mathematical CalculationsSASS/SCSS - 十六进制颜色数学计算
【发布时间】：2016-09-03 10:30:18
【问题描述】：

此问题仅用于学习目的。在计算十六进制颜色时，我了解 SASS 中数学运算背后的逻辑，即：

<div>Style me</div>

div {
color: #010203 + #010203;
}

我知道会这样计算：

01 + 01 = 02
02 + 02 = 04
03 + 03 = 06

将编译为：color #020406;。

更准确地说：

div {
color: #020406;
}

当您在其中包含字母时如何计算十六进制颜色？例如：

div {
color: #a1b1c1 + a2b2c2;
}

他们是这样计算的：

a1 + a2 = a3
b1 + b2 = b3
c1 + c2 = c3

哪个会编译成color: #a3b3c3;？

如果是这样，那会怎样

div {
color: #a1a2a3 + #b1b2b3;
}

计算？

a1 + b1 会导致c2 吗？

如果会，会发生什么：

乘法*
师/
取模%

我知道这是一个很长的问题，对此我深表歉意。

谢谢。

【问题讨论】：

我很确定你可以试试这个并找出自己，对吧？
#ff0000 + #00ffff = #ffffff （这很有意义，但让我们进一步了解：）#eeeeee + #eeeeee = #ffffff 这可以让您得出每个 HEX+HEX（R、G 或 B）通道超过 255 的总和保持在 255。(Min( R1_16 + R2_16, 255))
谢谢罗科。请发布它作为答案。 @Mei，如果不分享知识，这个网站的目的是什么？我可以自己找出答案，没错，但我希望其他人也可以通过这种方式学习，正如我在问题的第一句话中所指出的那样。通过与其他人讨论，我们可以找到比我们自己更多的东西。我看不出你的评论有什么帮助。

标签： html css sass

【解决方案1】：

在#010203 + #010203 的示例中，您应该首先拆分字符串以检索 RGB 通道，这样您就可以做到 RED+RED

var R1   = parseInt("01", 16);      // 1
var R2   = parseInt("01", 16);      // 1
var R1R2 = Math.min(R1 + R2, 255);  // 2

console.log( R1R2.toString(16) );   // "2"

添加一个前导零，然后使用02，对所有其他频道重复此操作，您就得到了#020406

让我们看另一个带有字母的例子：

var R1   = parseInt("9f", 16);      // 195
var R2   = parseInt("ae", 16);      // 174
var R1R2 = Math.min(R1 + R2, 255);  // 255  <<< !!!!!

console.log( R1R2.toString(16) );   // "ff"

因此，由于 RED 通道的 R1 + R2 超过 255 最大值，将使用 255，
将其转换回 HEX，您将拥有 ff。

总结：

#ff0000 + #00ffff = #ffffff 这很有意义，但让我们进一步了解：
#eeeeee + #eeeeee = #ffffff 这可以让您得出结论，每个 HEX+HEX（R、G 或 B）通道总和超过 255 时保持在 255。（伪代码:) Min( R1_16 + R2_16, 255)

【讨论】：