Question

此问题仅供学习之用。我理解在计算十六进制颜色时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吗？

如果可以，会发生什么：

乘法*
division /
modulo %

我知道这是一个很长的问题，我为此道歉。

谢谢。

Answer 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)

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

1 个答案: