SASS 中补码和反码的区别?
Difference between complement and invert in SASS?
我正在浏览 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
}
出于某种原因,complement
/invert
的许多在线示例使用颜色值,导致两个函数的输出相同。
虽然许多颜色值的complement
/invert
是相同的,但也有许多值导致不同的颜色。
示例:
$color: #ff6699;
complement($color) = #66ffcc;
invert($color) = #009966;
重写 Sass 文档:
补
ReturnsHSL色轮上180度相反的颜色。
计算颜色的补色:
将颜色值转换为RGB
#ff6699 = RGB 255, 102, 153
添加最高和最低 RGB 值
255 + 102 = 357
从第 2 步中的数字中减去每个原始 RGB 值
(357-255) (357-102) (357-153)
102 255 204
这对应#66ffcc
反转
Returns 反转颜色的红色、绿色和蓝色值。
计算颜色的反转:
将颜色值转换为RGB
#ff6699 = RGB 255, 102, 153
通过从 255 中减去原始 RGB 值来翻转值
(255-255) (255-102) (255-153)
0 153 102
这对应#009966
我正在浏览 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
}
出于某种原因,complement
/invert
的许多在线示例使用颜色值,导致两个函数的输出相同。
虽然许多颜色值的complement
/invert
是相同的,但也有许多值导致不同的颜色。
示例:
$color: #ff6699;
complement($color) = #66ffcc;
invert($color) = #009966;
重写 Sass 文档:
补
ReturnsHSL色轮上180度相反的颜色。
计算颜色的补色:
将颜色值转换为RGB
#ff6699 = RGB 255, 102, 153
添加最高和最低 RGB 值
255 + 102 = 357
从第 2 步中的数字中减去每个原始 RGB 值
(357-255) (357-102) (357-153)
102 255 204
这对应
#66ffcc
反转
Returns 反转颜色的红色、绿色和蓝色值。
计算颜色的反转:
将颜色值转换为RGB
#ff6699 = RGB 255, 102, 153
通过从 255 中减去原始 RGB 值来翻转值
(255-255) (255-102) (255-153)
0 153 102
这对应
#009966