sass:color

兼容性：
Dart·Sass（Dart Sass）
从  1.23.0开始
LibSass
✗
rubySass
✗

目前只有Dart Sass支持使用加载内置模块@use。其他实现的用户必须使用其全局名称来调用函数。

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

$color以固定量增加或减少一个或多个属性。

将传递给每个关键字参数的值添加到颜色的相应属性，然后返回调整后的颜色。这是指定的错误RGB属性（$red，$green，和/或$blue在同一时间）为HSL属性（$hue，$saturation，和/或  $lightness）。

所有可选参数都必须是数字。的$red，$green和$blue参数必须是无单位和255之间-255（含）。该$hue参数必须有单位deg或无单位。该$saturation和$lightness参数必须介于-100%和100%（含），且可以是无单位的。所述$alpha参数必须是无单位和1（含）之间-1。

也可以看看：

SCSS  语法

@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)

Sass语法

@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的色调。它可能是没有单位的。

另请参见color.adjust()，可以调整颜色的任何属性。

Head️抬头！

由于adjust-hue()与冗余adjust()，因此不直接包含在新模块系统中。相反adjust-hue($color, $amount)，您可以写color.adjust($color, $hue: $amount)。

SCSS  语法

// 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

Sass语法

// 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

以$color0到1之间的数字返回alpha通道。

作为一种特殊情况，它支持Internet Explorer语法alpha(opacity=20)，为此它返回未加引号的string。

也可以看看：

SCSS  语法

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

Sass语法

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

color.blue($color)
blue($color) //=> number

以$color0到255之间的数字返回蓝色通道。

也可以看看：

SCSS  语法

@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0

Sass语法

@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,
  $alpha: null)
change-color(...) //=> color

将一种或多种颜色的属性设置为新值。

使用为每个关键字参数传递的值代替颜色的相应属性，并返回更改的颜色。这是指定的错误RGB属性（$red，$green，和/或$blue在同一时间）为HSL属性（$hue，$saturation，和/或  $lightness）。

所有可选参数都必须是数字。的$red，$green和$blue参数必须是无单位和0到255之间（含）。该$hue参数必须有单位deg或无单位。该$saturation和$lightness参数必须介于0%和100%（含），且可以是无单位的。所述$alpha参数必须是无单位和1（含）之间-1。

也可以看看：

SCSS  语法

@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)

Sass语法

@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

返回RGB 补的  $color。

这与相同color.adjust($color, $hue: 180deg)。

SCSS  语法

// 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

Sass语法

// 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%（含）。将HSL亮度降低该$color数量。

Head️抬头！

该darken()功能将亮度降低固定量，这通常不是理想的效果。要使颜色比以前暗一些，请color.scale() 改用。

因为darken()通常不是使颜色变暗的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有行为，darken($color, $amount)可以编写color.adjust($color, $lightness: -$amount)。

SCSS  语法

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

Sass语法

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%)  // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%)  // #002447

SCSS  语法

// 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

Sass语法

// 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%（含）。将HSL饱和度降低该$color数量。

Head️抬头！

该desaturate()功能将饱和度降低固定量，这通常不是理想的效果。要使颜色的饱和度比以前降低一定的百分比，请color.scale() 改用。

因为desaturate()通常不是使颜色饱和度降低的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有行为，desaturate($color, $amount)可以编写color.adjust($color, $saturation: -$amount)。

SCSS  语法

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c

Sass语法

// #6b717f has saturation 20%, so when desaturate() subtracts 30% it just
// returns gray.
@debug desaturate(#d2e1dd, 30%)  // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%)  // #6e727c

SCSS  语法

// 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

Sass语法

// 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%)。

SCSS  语法

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(#d2e1dd); // #dadada
@debug color.grayscale(#036); // #333333

Sass语法

@debug color.grayscale(#6b717f)  // #757575
@debug color.grayscale(#d2e1dd)  // #dadada
@debug color.grayscale(#036)  // #333333

color.green($color)
green($color) //=> number

以$color0到255之间的数字返回绿色通道。

也可以看看：

SCSS  语法

@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0

Sass语法

@debug color.green(#e1d7d2)  // 215
@debug color.green(white)  // 255
@debug color.green(black)  // 0

color.hue($color)
hue($color) //=> number

以和  $color之间的数字形式返回的色相。0deg360deg

也可以看看：

SCSS  语法

@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg

Sass语法

@debug color.hue(#e1d7d2)  // 20deg
@debug color.hue(#f2ece4)  // 34.2857142857deg
@debug color.hue(#dadbdf)  // 228deg

color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string

返回一个无引号的字符串，该字符串表示Internet Explorer  属性期望$color的#AARRGGBB格式-ms-filter。

SCSS  语法

@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

Sass语法

@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。

在$weight必须之间的数字0%和100%（含）。较高的权重意味着结果将更接近负数，而较低的权重意味着结果将更接近负数$color。重量50%总会产生  #808080。

SCSS  语法

@debug color.invert(#b37399); // #4c8c66
@debug color.invert(black); // white
@debug color.invert(#550e0c, 20%); // #663b3a

Sass语法

@debug color.invert(#b37399)  // #4c8c66
@debug color.invert(black)  // white
@debug color.invert(#550e0c, 20%)  // #663b3a

lighten($color, $amount) //=> color

使$color 更轻。

在$amount必须之间的数字0%和100%（含）。使HSL亮度增加该$color数量。

Head️抬头！

该lighten()功能将亮度增加固定量，这通常不是理想的效果。要使颜色比以前变浅一定百分比，请scale() 改用。

因为lighten()通常不是使颜色变浅的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有行为，lighten($color, $amount)可以编写adjust($color, $lightness: $amount)。

SCSS  语法

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

Sass语法

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%)  // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%)  // #eae3e0

SCSS  语法

// 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

Sass语法

// 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

以和  之间的数字返回HSL亮度。$color0%100%

也可以看看：

SCSS  语法

@debug color.lightness