SASS |颜色函数 - 芒果文档

📌 相关文章

📜 SASS |颜色函数

📅 最后修改于: 2021-09-01 03:37:48 🧑 作者: Mango

颜色成分：在我们转到 SASS 颜色函数之前，让我们确保我们知道它们改变的颜色元素。简单的色彩理论将任何颜色分为三个基本组成部分：色调、饱和度和值。

HUE (也称为“局部颜色”)一般就是我们所说的颜色。如：蓝天，黄太阳。
饱和度是衡量颜色中存在的色调量的量度，即颜色强度。例如，云的颜色从白色变为蓝色再到黑色。
该值是颜色明暗程度的度量。例如，一块普通的棕色地面，一部分在阳光下，另一部分在阴影中。

颜色模型：在技术世界中，颜色表示为 RGB 或 HSL。 (还有各种其他模型，如 CMYK 和 LAB，但只有 RGB 和 HSL 是与 SASS 开发相关的模型。)

RGB 值是对基本颜色中“红”、“绿”和“蓝”数量的度量。每个组件都是一个介于 0(颜色不存在)到 255(完整颜色)之间的值。 RGB 颜色基本上以十六进制表示，如#0000ff 或#2abd35。

HSL 代表“色调、饱和度和亮度”。人们也可能会得到 HSV(这里的 V 代表“价值”)或 HSB(这里的 B 代表“亮度”)模型。例如，Photoshop 使用 HSB。

hsl($hue, $saturation, $value)：色调表示为颜色轮上的度数(纯红色为 0，纯绿色为 120，纯蓝色为 240)，而饱和度和值以百分比表示.

这是一个非常简单的例子。在 RGB 和 HSL 之间切换时，颜色的色调分量有时会变得非常难看。例如，#ac4138 的色调是 4.65517 度。

不透明度：在 RGB 和 HSL 颜色模型中，不透明度通过 0 到 100% 之间的 alpha 值给出，0 表示完全透明，100% 表示完全不透明。

SASS 颜色函数： rgb() 和 hsl() 用于制作更简洁的 CSS。所有现代浏览器都支持 rgba() 和 hsla() CSS 函数，因此 SASS 转译器将保持 CSS 中的函数相同。

其余三个函数“grayscale()、invert() 和complement()”在当前颜色的基础上生成一种新颜色。 Invert()函数，反转每个红色、绿色和蓝色值，并使用补码()将颜色旋转 180 度，给出非常相似但不完全相同的结果。

rgb($red, $green, $blue)：此方法根据给定的十进制值或百分比创建不透明颜色。
- 例子：
```
rgb(252, 186, 3)
```
- 输出：
```
#fcba03
```
```
rgb(50%, 50%, 100%)
```
- 输出：
```
#8080ff
```
rgba($red, $green, $blue, $alpha)：此方法基于给定不透明度的给定小数或百分比值创建颜色。
- 例子：
```
rgba(71, 214, 75, 0.5 )
```
- 输出：
```
rgba(71, 214, 75, 0.5 )
```
hsl($hue, $saturation, $lightness)：此方法根据给定的色调(以度为单位)、饱和度和亮度(以百分比为单位)创建不透明颜色。
- 例子：
```
hsl(122, 64, 56)
```
- 输出：
```
#47d74c
```
hsla($hue, $saturation, $lightness, $alpha)：此方法在指定的不透明度下根据指定的色调、饱和度和亮度创建颜色。
- 例子：
```
hsla(122, 64, 56, 50)
```
- 输出：
```
hsla(122, 64, 56, 50)
```
grayscale($color)：此方法返回与“颜色”具有相同强度的灰度值。
- 例子：
```
grayscale(#ad4038)
```
- 输出：
```
#737373
```
补充($color)：此方法返回具有相同饱和度和值的颜色，但其色调与“color”的色调相差180度。
- 例子：
```
complement(#47d74c)
```
- 输出：
```
#d747d2
```
invert($color)：此方法返回“颜色”的各个红色、绿色和蓝色分量的倒数。
- 例子：
```
invert(#ad4038)
```
- 输出：
```
#52bfc7
```

SASS 组件提取函数：

red($color)：此方法返回“color”的红色分量。
- 例子：
```
red(#d747d2)
```
- 输出：
```
215
```
green($color)：此方法返回“color”的绿色分量。
- 例子：
```
green(#d747d2)
```
- 输出：
```
71
```
blue($color)：此方法返回“color”的蓝色分量。
- 例子：
```
blue(#d747d2)
```
- 输出：
```
210
```
Hue($color)：此方法返回“颜色”的色调分量。
- 例子：
```
hue(#d747d2)
```
- 输出：
```
302°
```
饱和度($color)：此方法返回“颜色”的饱和度分量。
- 例子：
```
saturation(#d747d2)
```
- 输出：
```
64%
```
lightness($color)：此方法返回“颜色”的亮度分量。
- 例子：
```
lightness(#d747d2)
```
- 输出：
```
56%
```
alpha($color)：此方法返回颜色的 alpha 通道作为 0 到 1 之间的数字。
- 例子：
```
alpha(#d747d2)
```
- 输出：
```
1
```
opacity($color)：此方法返回颜色的不透明度作为 0 到 1 之间的数字。
- 例子：
```
opacity(rgba(215, 71, 210, 0.7);
```
- 输出：
```
0.7
```

SASS 操作颜色函数

mix($color1, $color2, $weight)：这个方法创建一个颜色，它是颜色 1 和颜色 2 的组合。权重参数必须介于 0% 和 100% 之间。较大的权重意味着应该使用更多的 color1。较小的权重意味着应该使用更多的 color2。默认值为 50%。
adjust-hue($color, $degrees)：此方法以-360deg 到360deg 的度数调整颜色的色调。
- 例子：
```
adjust-hue(#7fffd4, 80deg);
```
- 输出：
```
#8080ff
```
adjust-color($color, $red, $green, $blue, $hue, $saturation, $lightness, $alpha)：这个方法根据给定的数量调整一个或多个参数。此函数在现有颜色值中添加或减去给定量。
change-color($color, $red, $green, $blue, $hue, $saturation, $lightness, $alpha)：此方法将一种或多个颜色参数设置为新值。
- 例子：
```
change-color(#7fffd4, red: 255);
```
- 输出：
```
#ffffd4
```
scale-color($color, $red, $green, $blue, $saturation, $lightness, $alpha)：这个方法缩放一个或多个颜色参数。
rgba($color, $alpha)：此方法使用给定的 alpha 通道创建新颜色。
- 例子：
```
rgba(#7fffd4, 30%)
```
- 输出：
```
rgba(127, 255, 212, 0.3)
```
lighten($color, $amount)：这个方法创建一个较浅的颜色，数量在 0% 到 100% 之间。数量参数将 HSL 亮度增加该百分比。
darken($color, $amount)：此方法创建一个较深的颜色，其数量在 0% 到 100% 之间。数量参数将 HSL 亮度降低该百分比。
saturate($color, $amount)：此方法创建更饱和的颜色，其数量在 0% 到 100% 之间。数量参数将 HSL 饱和度增加了那个百分比。
desaturate($color, $amount)：此方法创建饱和度较低的颜色，其数量介于 0% 和 100% 之间。数量参数将 HSL 饱和度降低了那个百分比。
opacify($color, $amount)：这个方法创建一个更不透明的颜色，数量在 0 到 1 之间。amount 参数增加了这个数量的 alpha 通道。
V：此方法创建一个更不透明的颜色，数量介于 0 和 1 之间。数量参数将 Alpha 通道增加该数量。
transparentize($color, $amount)：此方法创建一个更透明的颜色，数量介于 0 和 1 之间。数量参数将 alpha 通道减少该数量。
淡出($color，$amount)：这个方法创建一个更透明的颜色，数量在0到1之间。amount参数将alpha通道减少这个数量。