颜色操作通常使用与更改值相同的单位进行参数设置，百分比则作为绝对值处理，因此将 10%的值增加 10%，结果就是 20%。将选项方法参数设置为相对，可获得相对百分比。使用相对百分比时，10% 的值增加 10%，结果为 11%。数值被限制在其允许的范围内，不会环绕。在显示返回值的地方，我们使用了格式，除了你通常要使用的十六进制版本外，还清楚地显示了每个函数的功能。
按绝对值增加 HSL 色彩空间中颜色的饱和度。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
method: 可选项，设置为 relative 时，调整值将相对于当前值。
返回： color
示例： saturate(hsl(90, 80%, 50%), 20%)
输出： #80ff00 // hsl(90, 100%, 50%)
按绝对值降低 HSL 色彩空间中颜色的饱和度。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
method: 可选项，设置为 relative 时，调整值将相对于当前值。
返回： color
示例： desaturate(hsl(90, 80%, 50%), 20%)
输出： #80cc33 // hsl(90, 60%, 50%)
按绝对值增加 HSL 色彩空间中颜色的亮度。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
method: 可选项，设置为 relative 时，调整值将相对于当前值。
返回： color
示例： lighten(hsl(90, 80%, 50%), 20%)
输出： #b3f075 // hsl(90, 80%, 70%)
按绝对值降低 HSL 色彩空间中颜色的亮度。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
method: 可选项，设置为 relative 时，调整值将相对于当前值。
返回： color
示例： darken(hsl(90, 80%, 50%), 20%)
输出： #4d8a0f // hsl(90, 80%, 30%)
降低颜色的透明度（或增加不透明度），使其更不透明。
对不透明颜色无效。要向另一个方向渐变，请使用 fadeout。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
method: 可选项，设置为 relative 时，调整值将相对于当前值。
返回： color
示例： fadein(hsla(90, 90%, 50%, 0.5), 10%)
输出： rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
增加颜色的透明度（或降低不透明度），使其不那么不透明。要向另一个方向渐变，使用 fadein。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
method: 可选项，设置为 relative 时，调整值将相对于当前值。
返回： color
示例： fadeout(hsla(90, 90%, 50%, 0.5), 10%)
输出： rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
设置颜色的绝对不透明度。无论颜色是否已经有不透明度值，都可以应用。
参数：
color: 一个颜色对象。
amount: 百分比 0-100%。
返回： color
示例： fade(hsl(90, 90%, 50%), 10%)
输出： rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
沿任一方向旋转颜色的色调角度。
虽然角度范围是 0-360，但它应用的是模数 360 操作，因此您可以输入更大的值（或负值），它们也会被包围，例如 360 和 720 的角度会产生相同的结果。请注意，颜色是通过 RGB 转换传递的，而 RGB 转换不会保留灰色的色相值（因为在没有饱和度的情况下，色相没有任何意义），因此请确保以保留色相的方式应用函数，例如不要这样做：
@c: saturate(spin(#aaaaaa, 10), 10%);
不如这样做：
@c: spin(saturate(#aaaaaa, 10%), 10);
颜色总是以 RGB 值返回，因此将旋转应用于灰色值不会有任何效果。
参数：
color: 一个颜色对象。
angle: 旋转的度数（+ 或 -）。
返回： color
示例：
spin(hsl(10, 90%, 50%), 30) spin(hsl(10, 90%, 50%), -30)
输出：
#f2a60d // hsl(40, 90%, 50%) #f20d59 // hsl(340, 90%, 50%)
将两种颜色按不同比例混合在一起。计算中包括不透明度。
参数：
color1: 一个颜色对象。
color2: 一个颜色对象。
weight: 可选项，两种颜色之间的平衡点百分比，默认为 50%。
返回： color
示例：
mix(#ff0000, #0000ff, 50%) mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
输出：
#800080 rgba(75, 25, 0, 0.75)
以可变比例将颜色与白色混合。这与调用 mix(#ffffffff, @color, @weight) 相同
参数：
color: 一个颜色对象。
weight: 可选项，色彩和白色之间的百分比平衡点，默认为 50%。
返回： color
示例：
no-alpha: tint(#007fff, 50%); with-alpha: tint(rgba(00,0,255,0.5), 50%);
输出：
no-alpha: #80bfff; with-alpha: rgba(191, 191, 255, 0.75);
以可变比例将颜色与黑色混合。这与调用 mix(#000000, @color, @weight) 相同
参数：
color: 一个颜色对象。
weight: 可选项，颜色和黑色之间的百分比平衡点，默认为 50%。
返回： color
示例：
no-alpha: shade(#007fff, 50%); with-alpha: shade(rgba(00,0,255,0.5), 50%);
输出：
no-alpha: #004080; with-alpha: rgba(0, 0, 64, 0.75);
去除 HSL 色彩空间中颜色的所有饱和度；与调用 desaturate(@color, 100%) 相同。
由于饱和度不受色相的影响，因此生成的颜色映射可能会有些暗淡或浑浊；由于 luma 提取的是感知亮度而非线性亮度，因此可能会提供更好的结果，例如，greyscale('#0000ff') 将返回与 greyscale('#00ff00') 相同的值，尽管它们在人眼看来亮度差别很大。
参数： color: 一个颜色对象。
返回： color
示例： greyscale(hsl(90, 90%, 50%))
输出： #808080 // hsl(90, 0%, 50%)
请注意，生成的灰色看起来比原始的绿色更暗，尽管其亮度值是相同的。
与使用 luma 进行比较（用法不同，因为 luma 返回的是单个值，而不是颜色）：
@c: luma(hsl(90, 90%, 50%)); color: rgb(@c, @c, @c);
输出： #cacaca
这一次，灰色的亮度看起来与绿色差不多，但其数值实际上更高。
从两种颜色中选择与另一种颜色对比度最大的一种。
这对于确保一种颜色在背景中的可读性非常有用，对于符合可访问性要求也非常有用。该功能与 Compass for SASS 中的对比度功能工作原理相同。根据 WCAG 2.0，比较颜色时使用的是经伽马校正的 luma 值，而不是亮度。
明暗参数可以任选一个顺序提供--该功能将计算它们的 luma 值并自动分配明暗，这意味着您无法使用该功能通过颠倒顺序来选择对比度最小的颜色。
参数：
color: 要与之比较的颜色对象。
dark: 可选的 - 指定的深色（默认为黑色）。
light: 可选的 - 指定的灯光颜色（默认为白色）。
threshold: 可选的- 0-100% 的百分比，指定从 "暗 "到 "亮 "的过渡位置（默认值为 43%，与 SASS 一致）。例如，您可以用它来决定 50% 灰色背景下的文字是黑色还是白色。一般来说，"浅色 "调色板可以设置得低一些，而 "深色 "调色板则可以设置得高一些。
返回： color
示例：
p {
a: contrast(#bbbbbb);
b: contrast(#222222, #101010);
c: contrast(#222222, #101010, #dddddd);
d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}输出：
p {
a: #000000 // black
b: #ffffff // white
c: #dddddd
d: #000000 // black
e: #ffffff // white
}这些示例使用上述计算出的颜色作为背景和前景色；您可以看到，您永远不会得到 "白底黑字 "或 "黑底白字 "的结果，尽管可以使用阈值来允许较低对比度的结果，如最后一个示例所示：
川公网安备51010802032098
