SASS |颜色功能
颜色组件:在我们进入 SASS 颜色功能之前，让我们确保我们知道它们所改变的颜色元素。简单的颜色理论将任何颜色分为三个基本组成部分:色调、饱和度和值。
- HUE (也叫“局部色”)一般就是我们说的颜色。比如:蓝天，黄太阳。
- 饱和度是表示颜色中存在的色调量的量度，即颜色强度。例如，云的颜色从白色变成蓝色再变成黑色。
- 值是颜色明度或暗度的度量。例如，一块普通的棕色土地，一部分在阳光下，另一部分在阴影中。
颜色模型:在技术世界中，颜色要么表示为 RGB，要么表示为 HSL。(还有其他各种各样的模型，比如 CMYK 和 LAB，但是只有 RGB 和 HSL 与 SASS 开发相关。)
RGB 值是基本颜色中“红色”“绿色”和“蓝色”数量的度量。每个组件都是 0(颜色不存在)到 255(完整颜色)之间的值。RGB 颜色基本上是用十六进制表示的，如#0000ff 或#2abd35。
HSL 代表“色调、饱和度和亮度”。人们可能还会得到 HSV(这里 V 代表“价值”)，或 HSB(这里 B 代表“亮度”)模型。比如 Photoshop 使用的是 HSB。
HSL($色相，$饱和度，$值):色相以色轮上的度数表示(纯红色为 0，纯绿色为 120，纯蓝色为 240)，而饱和度和值以百分比表示。
这是一个相当简单的例子。在 RGB 和 HSL 之间变化时，颜色的色调分量有时会变得相当难看。比如#ac4138 的色相是 4.65517 度。
不透明度:在 RGB 和 HSL 颜色模型中，不透明度是通过 0 到 100%之间的 alpha 值给出的，0 表示完全透明，100%表示完全不透明。
SASS 颜色功能:RGB()和 hsl()用于制作更简短的 CSS。所有现代浏览器都支持 rgba()和 hsla() CSS 函数，所以 SASS transpiler 会在 CSS 中保持这些函数不变。
其余三个函数“灰度()、反转()和补码()”在当前颜色的基础上生成一种新颜色。Invert()函数，将每个红、绿、蓝值和补码()反转，将颜色旋转 180 度，得到非常相似但不完全相同的结果。
-
RGB($红，$绿，$蓝):此方法基于给定的十进制值或百分比创建不透明的颜色。
-
例:
html rgb(252, 186, 3) -
输出:
```html
fcba03
```
html rgb(50%, 50%, 100%) -
输出:
```html
8080ff
```
-
-
rgba($红，$绿，$蓝，$α):此方法根据给定不透明度下的给定十进制或百分比值创建颜色。
-
例:
html rgba(71, 214, 75, 0.5 ) -
输出:
html rgba(71, 214, 75, 0.5 )
-
-
HSL($色相，$饱和度，$明度):该方法基于给定的色相(以度为单位)、饱和度和明度(以百分比为单位)创建不透明的颜色。
-
例:
html hsl(122, 64, 56) -
输出:
```html
47d74c
```
-
-
HSLA($色相，$饱和度，$明度，$alpha): 该方法在指定的不透明度下，基于指定的色相、饱和度和明度创建颜色。
-
例:
html hsla(122, 64, 56, 50) -
输出:
html hsla(122, 64, 56, 50)
-
-
灰度($color): 该方法返回与“color”具有相同强度的灰度值。
-
例:
html grayscale(#ad4038) -
输出:
```html
737373
```
-
-
补码($color): 此方法返回的颜色具有相同的饱和度和值，但色调与“color”的色调相差 180 度。
-
例:
html complement(#47d74c) -
输出:
```html
d747d2
```
-
-
反转($color): 该方法返回“color”的单个红、绿、蓝分量的反转。
-
例:
html invert(#ad4038) -
输出:
```html
52bfc7
```
-
SASS 成分提取功能:
-
红色($color): 此方法返回“color”的红色成分。
-
例:
html red(#d747d2) -
输出:
html 215
-
-
绿色($color): 此方法返回“color”的绿色成分。
-
例:
html green(#d747d2) -
输出:
html 71
-
-
蓝色($color): 该方法返回“color”的蓝色成分。
-
例:
html blue(#d747d2) -
输出:
html 210
-
-
色相($color): 此方法返回“color”的色相分量。
-
例:
html hue(#d747d2) -
输出:
html 302°
-
-
饱和度($color): 此方法返回“color”的饱和度分量。
-
例:
html saturation(#d747d2) -
输出:
html 64%
-
-
明度($color): 此方法返回“color”的明度分量。
-
例:
html lightness(#d747d2) -
输出:
html 56%
-
-
alpha($color): 此方法将颜色的 alpha 通道作为 0 到 1 之间的数字返回。
-
例:
html alpha(#d747d2) -
输出:
html 1
-
-
不透明度($color): 此方法将颜色的不透明度作为 0 到 1 之间的数字返回。
-
例:
html opacity(rgba(215, 71, 210, 0.7); -
输出:
html 0.7
-
SASS 操纵颜色功能
- mix($color1，$color2，$weight): 此方法创建的颜色是 color1 和 color2 的组合。重量参数必须介于 0%和 100%之间。更大的重量意味着应该使用更多的颜色 1。较小的重量意味着应该使用更多的颜色 2。默认值为 50%。
-
调整-色调($color，$degrees): 此方法以-360 度到 360 度的角度调整颜色的色调。
-
例:
html adjust-hue(#7fffd4, 80deg); -
输出:
```html
8080ff
```
-
-
调整-color($color，$red，$green，$blue，$色相，$饱和度，$明度，$alpha): 此方法按给定量调整一个或多个参数。该函数将给定量添加到现有颜色值或从现有颜色值中减去给定量。
-
变色($color，$red，$green，$blue，$色相，$饱和度，$明度，$alpha): 此方法将一种颜色的一个或多个参数设置为新值。
-
例:
html change-color(#7fffd4, red: 255); -
输出:
html #ffffd4
-
-
缩放-颜色($color，$red，$green，$blue，$饱和度，$明度，$alpha): 此方法缩放颜色的一个或多个参数。
-
rgba($color，$alpha): 这个方法用给定的 alpha 通道创建一个新的颜色。
-
例:
html rgba(#7fffd4, 30%) -
输出:
html rgba(127, 255, 212, 0.3)
-
-
变浅($color，$amount): 此方法创建一个介于 0%和 100%之间的较浅颜色。“数量”参数将 HSL 亮度增加该百分比。
- 变暗($color，$amount): 此方法创建一个更暗的颜色，其量在 0%和 100%之间。“数量”参数将 HSL 亮度降低该百分比。
- 饱和($color，$amount): 此方法创建更饱和的颜色，其量在 0%和 100%之间。“数量”参数会将 HSL 饱和度增加该百分比。
- 去饱和($color，$amount): 此方法创建饱和度较低的颜色，其量介于 0%和 100%之间。“数量”参数将 HSL 饱和度降低该百分比。
- 不透明($color，$amount): 此方法创建一种更不透明的颜色，其量介于 0 和 1 之间。“数量”参数将 alpha 通道增加该数量。
- V: 此方法创建的颜色更不透明，数量在 0 到 1 之间。“数量”参数将 alpha 通道增加该数量。
- 透明化($color，$amount): 此方法创建一种更透明的颜色，其量在 0 到 1 之间。“数量”参数将 alpha 通道减少该数量。
- 淡入淡出($color，$amount): 此方法创建一种更透明的颜色，其量在 0 到 1 之间。“数量”参数将 alpha 通道减少该数量。
版权属于：月萌API www.moonapi.com，转载请注明出处
