Compatibility: Dart Sass since 1.23.0 ｜ LibSass ✗ ｜ Ruby Sass ✗
color.adjust($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$alpha: null)
adjust-color(...) //=> color
Compatibility ($whiteness and $blackness): Dart Sass since 1.28.0 ｜ LibSass ✗ ｜ Ruby Sass ✗
按固定数量增加或减少 $color 的一个或多个属性。
将为每个关键字参数传递的值添加到颜色的相应属性，并返回调整后的颜色。 在指定 RGB 属性($red、$green 和/或 $blue)的同时指定 HSL 属性($hue、$saturation 和/或 )是错误的 $lightness)，或与 HWB 属性($hue、$whiteness 和/或 $ 黑色)。
所有可选参数都必须是数字。 $red、$green 和 $blue 参数必须是 unitless 并且介于 -255 和 255(含)之间。 $hue 参数必须有单位 deg 或没有单位。 $saturation、$lightness、$whiteness 和 $blackness 参数必须介于 -100% 和 100%(含)之间，并且不能没有单位。 $alpha 参数必须无单位且介于 -1 和 1(含)之间。
也可以看看：
color.scale()用于流畅地缩放颜色的属性。color.change()用于设置颜色的属性。
@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)
adjust-hue($color, $degrees) //=> color
增加或减少 $color 的色调。
$hue 必须是介于 -360deg 和 360deg(含)之间的数字才能添加到 $color 的色调中。 它可能是 unitless 但除了 deg 之外它可能没有任何单位。
另请参阅 color.adjust()，它可以调整颜色的任何属性。
⚠️ 注意！
因为 adjust-hue() 与 adjust() 是多余的，所以它没有直接包含在新模块系统中。 您可以编写 color.adjust($color, $hue: $amount) 而不是 adjust-hue($color, $amount)。
// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f
// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2
// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066
color.alpha($color)
alpha($color)
opacity($color) //=> number
Returns the alpha channel of $color as a number between 0 and 1.
As a special case, this supports the Internet Explorer syntax alpha(opacity=20), for which it returns an unquoted string.
See also:
color.red()for getting a color’s red channel.color.green()for getting a color’s green channel.color.blue()for getting a color’s blue channel.color.hue()for getting a color’s hue.color.saturation()for getting a color’s saturation.color.lightness()for getting a color’s lightness.
@debug color.alpha(#e1d7d2); // 1
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)
color.blackness($color) //=> number
Compatibility: Dart Sass since 1.28.0 ｜ LibSass ｜ ✗ ｜ Ruby Sass ✗
Returns the HWB blackness of $color as a number between 0% and 100%.
See also:
color.red()for getting a color’s red channel.color.green()for getting a color’s green channel.color.hue()for getting a color’s hue.color.saturation()for getting a color’s saturation.color.lightness()for getting a color’s lightness.color.whiteness()for getting a color’s whiteness.color.alpha()for getting a color’s alpha channel.
@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%
color.blue($color)
blue($color) //=> number
Returns the blue channel of $color as a number between 0 and 255.
See also:
color.red()for getting a color’s red channel.color.green()for getting a color’s green channel.color.hue()for getting a color’s hue.color.saturation()for getting a color’s saturation.color.lightness()for getting a color’s lightness.color.whiteness()for getting a color’s whiteness.color.blackness()for getting a color’s blackness.color.alpha()for getting a color’s alpha channel.
@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0
color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$whiteness: null, $blackness: null,
$alpha: null)
change-color(...) //=> color
Compatibility ($whiteness and $blackness): Dart Sass since 1.28.0 ｜ LibSass ✗ ｜ Ruby Sass ✗ 将一种颜色的一个或多个属性设置为新值。
使用为每个关键字参数传递的值代替颜色的相应属性，并返回更改后的颜色。 在指定 RGB 属性($red、$green 和/或 $blue)的同时指定 HSL 属性($hue、$saturation 和/或 )是错误的 $lightness)，或与 HWB 属性($hue、$whiteness 和/或 $ 黑色)。
所有可选参数都必须是数字。 $red、$green 和 $blue 参数必须是 unitless 并且介于 0 到 255(含)之间。 $hue 参数必须有单位 deg 或没有单位。 $saturation、$lightness、$whiteness 和 $blackness 参数必须介于 0% 和 100%(含)之间，并且不能没有单位。 $alpha 参数必须是无单位的，并且介于 0 和 1(含)之间。
也可以看看：
color.scale()用于流畅地缩放颜色的属性。color.adjust()用于按固定数量调整颜色的属性。
@debug color.change(#6b717f, $red: 100); // #64717f
@debug color.change(#d2e1dd, $red: 100, $blue: 50); // #64e132
@debug color.change(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)
color.complement($color)
complement($color) //=> color
返回 $color 的 RGB 补码。
这与 color.adjust($color, $hue: 180deg) 相同。
// Hue 222deg becomes 42deg.
@debug color.complement(#6b717f); // #7f796b
// Hue 164deg becomes 344deg.
@debug color.complement(#d2e1dd); // #e1d2d6
// Hue 210deg becomes 30deg.
@debug color.complement(#036); // #663300
darken($color, $amount) //=> color
使 $color 变暗。
$amount 必须是介于 0% 和 100%(含)之间的数字。 将 $color 的 HSL 亮度降低该数量。
⚠️ 注意！
darken() 函数将亮度降低固定数量，这通常不是预期的效果。 要使颜色比以前深一定百分比，请改用 color.scale()。
因为 darken() 通常不是使颜色变暗的最佳方法，所以它没有直接包含在新模块系统中。 但是，如果您必须保留现有行为，可以将 darken($color, $amount) 写成 color.adjust($color, $lightness: -$amount)。
// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465
// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a
// Lightness 20% becomes 0%.
@debug darken(#036, 30%); // black
desaturate($color, $amount) //=> color
降低 $color 的饱和度。
$amount 必须是介于 0% 和 100%(含)之间的数字。 将 $color 的 HSL 饱和度降低该数量。
⚠️ 注意！
desaturate() 函数将饱和度降低固定量，这通常不是预期的效果。 要使颜色的饱和度比以前降低一定百分比，请改用 color.scale()。
因为 desaturate() 通常不是降低颜色饱和度的最佳方法，所以它没有直接包含在新模块系统中。 然而，如果你必须保留现有的行为，desaturate($color, $amount) 可以写成 [color.adjust($color, $saturation: -$amount)](/modules/ 颜色#调整)。
// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c
// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8
// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada
color.grayscale($color)
grayscale($color) //=> color
返回与 $color 具有相同亮度的灰色。
这与 color.change($color, $saturation: 0%) 相同。
@debug color.grayscale(#6b717f) // #757575
@debug color.grayscale(#d2e1dd) // #dadada
@debug color.grayscale(#036) // #333333
color.green($color)
green($color) //=> number
将 $color 的绿色通道返回为 0 到 255 之间的数字。
也可以看看：
color.red()用于获取颜色的红色通道。color.blue()用于获取颜色的蓝色通道。color.hue()用于获取颜色的色调。color.saturation()用于获取颜色的饱和度。color.lightness()用于获取颜色的亮度。color.whiteness()用于获取颜色的白度。color.blackness()用于获取颜色的黑度。color.alpha()用于获取颜色的 alpha 通道。
@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0
color.hue($color)
hue($color) //=> number
将 $color 的色调作为介于 0deg 和 360deg 之间的数字返回。
也可以看看：
color.red()用于获取颜色的红色通道。color.green()用于获取颜色的绿色通道。color.blue()用于获取颜色的蓝色通道。color.saturation()用于获取颜色的饱和度。color.lightness()用于获取颜色的亮度。color.whiteness()用于获取颜色的白度。color.blackness()用于获取颜色的黑度。color.alpha()用于获取颜色的 alpha 通道。
@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg
color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color
Compatibility: Dart Sass since 1.28.0 ｜ LibSass ✗ ｜ Ruby Sass ✗
返回具有给定 色相、白度和黑度 和给定 alpha 通道的颜色。
色调是介于“0deg”和“360deg”(含)之间的数字。 白度和黑度是介于“0%”和“100%”(含)之间的数字。 色调可以是 unitless，但白度和黑度必须有单位 %。 Alpha 通道可以指定为 0 到 1(含)之间的无单位数字，或 0% 到 100%(含)之间的百分比。
⚠️ Heads up!
Sass 对斜杠分隔值的特殊解析规则 使得在使用 color.hwb 时很难为 $blackness或$alpha 传递变量 ($hue $whiteness $blackness / $alpha) 签名。 考虑改用 color.hwb($hue, $whiteness, $blackness, $alpha)。
@debug color.hwb(210, 0%, 60%); // #036
@debug color.hwb(34, 89%, 5%); // #f2ece4
@debug color.hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)
color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string
返回一个不带引号的字符串，表示 Internet Explorer -ms-filter 属性。
@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(#808c99); // #FF808C99
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
color.invert($color, $weight: 100%)
invert($color, $weight: 100%) //=> color
返回 $color 的倒数或 negative。
$weight 必须是介于 0% 和 100%(含)之间的数字。 较高的权重意味着结果将更接近负数，而较低的权重意味着它将更接近 $color。 权重 50% 总是会产生 #808080。
@debug color.invert(#b37399); // #4c8c66
@debug color.invert(black); // white
@debug color.invert(#550e0c, 20%); // #663b3a
lighten($color, $amount) //=> color
使 $color 变浅。
$amount 必须是介于 0% 和 100%(含)之间的数字。 按该数量增加 $color 的 HSL 亮度。
⚠️ 注意！
lighten() 函数按固定量增加亮度，这通常不是预期的效果。 要使颜色比以前亮一定百分比，请改用 scale()。
因为 lighten() 通常不是使颜色变亮的最佳方法，所以它没有直接包含在新模块系统中。 但是，如果您必须保留现有行为，lighten($color, $amount) 可以写成 adjust($color, $lightness: $amount).
// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af
// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff
// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%); // white
color.lightness($color)
lightness($color) //=> number
以介于 0% 和 100% 之间的数字形式返回 $color 的 HSL 亮度。
也可以看看：
color.red()用于获取颜色的红色通道。color.green()用于获取颜色的绿色通道。color.blue()用于获取颜色的蓝色通道。color.hue()用于获取颜色的色调。color.saturation()用于获取颜色的饱和度。color.whiteness()用于获取颜色的白度。color.blackness()用于获取颜色的黑度。color.alpha()用于获取颜色的 alpha 通道。
@debug color.lightness(#e1d7d2); // 85.2941176471%
@debug color.lightness(#f2ece4); // 92.1568627451%
@debug color.lightness(#dadbdf); // 86.4705882353%
color.mix($color1, $color2, $weight: 50%)
mix($color1, $color2, $weight: 50%) //=> color
返回混合了 $color1 和 $color2 的颜色。
每种颜色的“$weight”和相对不透明度都决定了每种颜色在结果中所占的比例。 $weight 必须是介于 0% 和 100%(含)之间的数字。 较大的权重表示应该使用更多的 $color1，较小的权重表示应该使用更多的 $color2。
Makes $color more opaque.
The $amount must be a number between 0 and 1 (inclusive). Increases the alpha channel of $color by that amount.
⚠️ Heads up!
The opacify() function increases the alpha channel by a fixed amount, which is often not the desired effect. To make a color a certain percentage more opaque than it was before, use scale() instead.
Because opacify() is usually not the best way to make a color more opaque, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, opacify($color, $amount) can be written adjust($color, $alpha: -$amount).
@debug opacify(rgba(#6b717f, 0.5), 0.2) // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4) // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3) // #036
Returns the red channel of $color as a number between 0 and 255.
See also:
color.green()for getting a color’s green channel.color.blue()for getting a color’s blue channel.color.hue()for getting a color’s hue.color.saturation()for getting a color’s saturation.color.lightness()for getting a color’s lightness.color.whiteness()for getting a color’s whiteness.color.blackness()for getting a color’s blackness.color.alpha()for getting a color’s alpha channel.
@debug color.red(#e1d7d2) // 225
@debug color.red(white) // 255
@debug color.red(black) // 0
Makes $color more saturated.
The $amount must be a number between 0% and 100% (inclusive). Increases the HSL saturation of $color by that amount.
⚠️ Heads up!
The saturate() function increases saturation by a fixed amount, which is often not the desired effect. To make a color a certain percentage more saturated than it was before, use scale() instead.
Because saturate() is usually not the best way to make a color more saturated, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, saturate($color, $amount) can be written adjust($color, $saturation: $amount).
Returns the HSL saturation of $color as a number between 0% and 100%.
See also:
color.red()for getting a color’s red channel.color.green()for getting a color’s green channel.color.blue()for getting a color’s blue channel.color.hue()for getting a color’s hue.color.lightness()for getting a color’s lightness.color.whiteness()for getting a color’s whiteness.color.blackness()for getting a color’s blackness.color.alpha()for getting a color’s alpha channel.
Compatibility ($whiteness and $blackness): Dart Sass since 1.28.0 ｜ LibSass ✗ ｜ Ruby Sass ✗
Fluidly scales one or more properties of $color.
Each keyword argument must be a number between -100% and 100% (inclusive). This indicates how far the corresponding property should be moved from its original position towards the maximum (if the argument is positive) or the minimum (if the argument is negative). This means that, for example, $lightness: 50% will make all colors 50% closer to maximum lightness without making them fully white.
It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($saturation, and/or $lightness), or either of those at the same time as an HWB property ($whiteness, and/or $blackness).
See also:
color.adjust()for changing a color’s properties by fixed amounts.color.change()for setting a color’s properties.
Makes $color more transparent.
The $amount must be a number between 0 and 1 (inclusive). Decreases the alpha channel of $color by that amount.
⚠️ Heads up!
The transparentize() function decreases the alpha channel by a fixed amount, which is often not the desired effect. To make a color a certain percentage more transparent than it was before, use color.scale() instead.
Because transparentize() is usually not the best way to make a color more transparent, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, transparentize($color, $amount) can be written color.adjust($color, $alpha: -$amount).
Compatibility: Dart Sass since 1.28.0 ｜ LibSass ✗ ｜ Ruby Sass ✗
Returns the HWB whiteness of $color as a number between 0% and 100%.
See also:
color.red()for getting a color’s red channel.color.green()for getting a color’s green channel.color.hue()for getting a color’s hue.color.saturation()for getting a color’s saturation.color.lightness()for getting a color’s lightness.color.blackness()for getting a color’s blackness.color.alpha()for getting a color’s alpha channel.