Sass sass:color 模块

SASS 提供了许多内置模块，其中包含各种有用的功能和一些易于使用的 mixin。所有内置模块都以 sass 开头：表示它们与其他模块不同，是 SASS 本身的一部分。内置模块之一是sass:color模块。该模块用于从现有颜色创建新颜色。这个模块有一个可以在使用 sass 编码时直接使用的函数列表：

• color.adjust()：这个函数以固定的量增加或减少颜色的不同属性。

  句法：

  color.adjust($color,
    $red: null, $green: null, $blue: null,
    $hue: null, $saturation: null, $lightness: null,
    $alpha: null)
  adjust-color(...)
  

  该函数将为每个关键字参数传递的值添加到颜色的相应属性，并返回调整后的颜色。同时指定 RGB 属性和 HSL 属性时会引发错误。每个可选参数都必须是一个数字。 RGB 参数必须是无单位的，并且介于-255 和 255 (包括两者)之间。 hue参数必须以deg作为单位或没有单位。 saturation和lightness参数必须始终介于-100% 和 100% (包括两者)之间，并且可以是无单位的。 alpha参数必须是无单位的并且介于-1 和 1之间(包括两者)。

  例子：

  @debug color.adjust(#2cb890, $green: 20);
  @debug color.adjust(#35785f, $red: -20, $blue: 30);
  @debug color.adjust(#21787d, 
          $lightness: -20%, $alpha: -0.5); 
  

  输出：

  #2ccc91
  #21787d
  rgba(12, 43, 44, 0.5)
  

• adjust-hue()：这个函数增加或减少颜色的色调值。

  句法：

  adjust-hue($color, $degrees)
  

  色调值必须始终是介于-360 度和 360 度(包括两者)之间的数字，才能将其添加到颜色的色调中。它可能是无单位的。

  例子：

  @debug adjust-hue(#0c2b2c, -50deg);
  

  输出：

  #0c2c12
  

• color.alpha()：此函数返回颜色的 alpha 通道，作为 0 到 1 之间的数字。

  句法：

  color.alpha($color)
  alpha($color)
  opacity($color)
  

  例子：

  @debug color.alpha(#e1d7d2);
  @debug color.opacity(rgb(210, 225, 221, 0.4));
  @debug alpha(opacity=20);
  

  输出：

  1
  0.4
  alpha(opacity=20)
  

• color.change()：此函数将颜色的一个或多个属性设置为新的颜色值。

  句法：

  color.change($color,
    $red: null, $green: null, $blue: null,
    $hue: null, $saturation: null, $lightness: null,
    $alpha: null)
  change-color(...)
  

  该函数使用为每个关键字参数传递的值传递给颜色的相应属性，然后返回更改后的颜色。同时指定 RGB 属性和 HSL 属性时会引发错误。每个可选参数都必须是一个数字。 RGB 参数必须是无单位的，并且介于-255 和 255 (包括两者)之间。 hue参数必须以deg作为单位或没有单位。 saturation和lightness参数必须始终介于-100% 和 100% (包括两者)之间，并且可以是无单位的。 alpha参数必须是无单位的并且介于-1 和 1之间(包括两者)。

  例子：

  @debug color.change(#6b717f, $red: 100); 
  @debug color.change(#d2e1dd, $red: 100, $blue: 50); 
  @debug color.change(#998099, $lightness: 30%, $alpha: 0.5); 
  

  输出：

  #64717f
  #64e132
  rgba(85, 68, 85, 0.5)
  

• color.complement()：此函数返回颜色的 RGB 补色。它与color.adjust($color, $hue: 180deg) 。

  句法：

  color.complement($color)
  complement($color)
  

  例子：

  @debug color.complement(#6b717f); 
  @debug color.complement(#d2e1dd);
  @debug color.complement(#036); 
  

  输出：

  #7f796b
  #e1d2d6
  #663300  
  

• desaturate()：这个函数使颜色的饱和度降低给定的数量。

  句法：

  desaturate($color, $amount)
  

  该金额必须始终是介于0% 和 100% (包括两者)之间的数字。该函数将颜色的 HSL 饱和度降低该数量。

  例子：

  @debug desaturate(#036, 20%);
  @debug desaturate(#f2ece4, 20%);
  

  输出：

  #0a335c
  #eeebe8