今天我们来看一下 Sass 中的颜色函数，颜色函数可以分为三部分css背景颜色透明度css背景颜色透明度，分别是颜色设置、颜色获取以及颜色操作。

  Sass 中的颜色函数有很多，下面我们来看一下这11个 Sass 中常用的颜色函数：

  函数描述

  rgb()

  创建一个 Red-Green-Blue（RGB） 色

  rgba()

  创建一个带有透明度值的颜色

  hsl()

  通过色相、饱和度和亮度的值创建一个颜色

  hsla()

  通过色相、饱和度、亮度和透明的值创建一个颜色

  red()

  从一个颜色中获取其中红色值

  lightness

  获取一个颜色的亮度值(0% - 100%)

  alpha

  将颜色的 alpha 通道返回为介于 0 和 1 之间的数字

  opacity

  获取颜色透明度值(0-1)

  mix()

  把两种颜色混合起来

  fade-in()

  降低颜色的透明度，取值在 0-1 之。

  fade-out()

  提升颜色的透明度，取值在 0-1 之间。

  1、rgb()函数

  rgb()函数创建一个 Red-Green-Blue（RGB） 色，其中 R 表示红色，G表示绿色，B表示蓝色。RGB的取值范围在 0 到 255 之间。

  示例：

  这个函数我们应该比较熟悉了，在 css 中设置颜色值也会用到这个函数：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` background: rgb(240, 236, 122); color: rgb(15, 88, 96);}`</pre>

  编译成 css 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` background: #f0ec7a; color: #0f5860;}`</pre>

  需要注意的是 rgb()函数中的参数值范围在 0 到 255 之前，不能超过 255，否则会失效。

  2、rbga()函数

  rbga()函数的使用和 rgb()函数差不多，都是用于创建颜色，但是 rgba()中多了一个 alpha，也就是颜色透明度。颜色透明度的取值范围为 0 到 1 之间的小数，例如0.1、0.2 0.3 等， 值越小颜色越透明。

  示例：

  例如我们给一个黑色设置透明度为 0.6：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` background: rgba(0, 0, 0, 0.6); color: rgb(0, 0, 0);}`</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` background: rgba(0, 0, 0, 0.6); color: black;}`</pre>

  大家可以自己试一下，当设置不同的透明度值时，会有什么效果。一般我们在制作网页时，会给一些背景颜色设置透明度。

  3、hsl()函数

  hsl()函数可以通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。

  示例：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="properties">.xkd{` color: hsl(100, 100%, 60%); a{ color: hsl(255, 80%, 70%); }}`</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` color: #77ff33;}.xkd a { color: #9475f0;}`</pre>

  4、hsla()函数

  hsla()函数可以通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。

  示例：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="properties">.xkd{` color: hsla(100, 100%, 60%, 0.8); a{ color: hsla(255, 80%, 70%, 0.3); }}`</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` color: rgba(119, 255, 51, 0.8);}.xkd a { color: rgba(148, 117, 240, 0.3);}`</pre>

  5、red()函数

  red()函数用于从一个颜色中获取其中红色值，取值范围为 0 到 255。除了 red()函数，还有 green()函数和 blue()函数。

  示例：

  例如获取一个颜色中的红色值、绿色值、蓝色值：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content: red(#fecefc); content: green(#fecefc); content: blue(#fecefc);`}</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: 254; content: 206; content: 252;`}</pre>

  上述代码中，red()函数用于从一个颜色中获取红色值，同理，green()函数用于获取绿色值，blue()函数用于获取蓝色值。

  我们可以试一下在 rgb()函数中使用这三个获取到的数值，看看创建的颜色是否同#fecefc 一样：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js">rgb(254, 206, 252)</pre>

  6、lightness()函数

  lightness()函数获取一个颜色的亮度值，取值范围为0% 到 100%。

  示例：

  例如获取不同颜色值的亮度：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content:lightness(#cccccc); content:lightness(#ff0000);}`</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: 80%; content: 50%;}`</pre>

  根据输出结果可以看出，#cccccc 颜色的亮度为 80%，#ff0000的亮度为 50%。

  7、alpha()函数

  alpha()函数将颜色的 alpha 通道返回为介于 0 和 1 之间的数字。

  示例：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content:alpha(pink); content:alpha(rgba(125, 125, 125, 0.6));}`</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: 1; content: 0.6;}`</pre>

  8、opacity()函数

  opacity()函数用于获取颜色透明度值，取值范围在 0 到 1 之间。

  示例：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content:opacity(rgba(212, 234, 124, 0.1)); content: opacity(red);}`</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: 0.1; content: 1;}`</pre>

  9、mix()函数

  mix()函数用于将两种颜色混合起来，可以组成一个新的颜色值。

  示例：

  例如我们将蓝色和绿色混合起来：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content:mix(blue, green);`}</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: #004080;`}</pre>

  编译后，组成了一个新的颜色#004080。

  10、fade-in()函数

  fade-in()函数降低颜色的透明度，取值在 0 到 1 之间。

  示例：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content:fade-in(rgba(100, 100, 255, 0.7), 0.1);`}</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: rgba(100, 100, 255, 0.8);`}</pre>

  可以看到，编译后的代码中，透明度由原来的0.7 变为了0.8。因为值越小透明度越高，反之值越大，透明度越低。

  11、fade-out()函数

  fade-out()函数提升颜色的透明度，取值在 0 到 1 之间。

  示例：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd{` content:fade-out(rgba(100, 100, 255, 0.7), 0.1);`}</pre>

  编译成 CSS 代码：

  <pre style="color: rgb(0, 0, 0);font-size: 15px;text-align: start;background-color: rgb(255, 255, 255);"><pre class="code-snippet__js" data-lang="css">.xkd {` content: rgba(100, 100, 255, 0.6);`}</pre>

  上述代码中，透明度由0.7 提升到0.6，值越小越透明。

  4.

  5.||

  6.||

  7. 120

  回复“加群”与大佬们一起交流学习~