补体与倒置在SASS中的差异？

Question

我正在浏览SASS文档，发现complement和invert具有相同的输出，您能告诉我这两者之间的区别吗？

//SASS Code
$color:#ff0099;
$complement:complement($color);
//Returns the complement of a color.
$invert:invert($color);//Returns the inverse of a color.
.complement{background:$complement;}
.invert{background:$invert;}

//CSS
.complement {
    background: #00ff66;//Same Color Code
}

.invert {
    background: #00ff66;//Same Color Code
}

Answer 1

由于某些原因，许多用于complement/invert的在线示例使用颜色值，因此这两个函数的输出结果相同。

虽然许多颜色值的complement/invert是相同的，但也有许多值会导致不同的颜色。

示例：

$color: #ff6699;

complement($color)    = #66ffcc;
invert($color)        = #009966;

要重新定义Sass文档：

补体

返回在HSL色轮上相对于180度的颜色。

​

​

计算一种颜色的补体：

1. 将颜色值转换为RGB。 #ff6699 = RGB 255, 102, 153
2. 添加最高和最低的RGB值。 255 + 102 = 357
3. 从步骤2中的数字中减去每个原始RGB值。 (357-255) (357-102) (357-153) 102 255 204
4. 这对应于#66ffcc

倒置

返回颜色的反向红色、绿色和蓝色值。

若要计算颜色的反转：

1. 将颜色值转换为RGB。 #ff6699 = RGB 255, 102, 153
2. 通过从255中减去原始RGB值来翻转这些值。 (255-255) (255-102) (255-153) 0 153 102
3. 这对应于#009966