【CSS】11 个 Sass 中常用的颜色函数，你需要知道一下

迈不过友情╰ 2022-08-30 00:54 246阅读 0赞

![02e6a6a7ac035c995c7a5a955d3de19a.png][]

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

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

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>rgb()</td> 
   <td>创建一个 Red-Green-Blue（RGB） 色</td> 
  </tr> 
  <tr> 
   <td>rgba()</td> 
   <td>创建一个带有透明度值的颜色</td> 
  </tr> 
  <tr> 
   <td>hsl()</td> 
   <td>通过色相、饱和度和亮度的值创建一个颜色</td> 
  </tr> 
  <tr> 
   <td>hsla()</td> 
   <td>通过色相、饱和度、亮度和透明的值创建一个颜色</td> 
  </tr> 
  <tr> 
   <td>red()</td> 
   <td>从一个颜色中获取其中红色值</td> 
  </tr> 
  <tr> 
   <td>lightness</td> 
   <td>获取一个颜色的亮度值(0% - 100%)</td> 
  </tr> 
  <tr> 
   <td>alpha</td> 
   <td>将颜色的 alpha 通道返回为介于 0 和 1 之间的数字</td> 
  </tr> 
  <tr> 
   <td>opacity</td> 
   <td>获取颜色透明度值(0-1)</td> 
  </tr> 
  <tr> 
   <td>mix()</td> 
   <td>把两种颜色混合起来</td> 
  </tr> 
  <tr> 
   <td>fade-in()</td> 
   <td>降低颜色的透明度，取值在 0-1 之。</td> 
  </tr> 
  <tr> 
   <td>fade-out()</td> 
   <td>提升颜色的透明度，取值在 0-1 之间。</td> 
  </tr> 
 </tbody> 
</table>

#### **1、rgb()函数** ####

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

##### 示例： #####

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

.xkd{    background: rgb(240, 236, 122);    color: rgb(15, 88, 96);}

编译成 css 代码：

.xkd {  background: #f0ec7a;  color: #0f5860;}

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

#### **2、rbga()函数** ####

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

##### 示例： #####

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

.xkd{    background: rgba(0, 0, 0, 0.6);    color: rgb(0, 0, 0);}

编译成 CSS 代码：

.xkd {  background: rgba(0, 0, 0, 0.6);  color: black;}

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

#### **3、hsl()函数** ####

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

##### 示例： #####

.xkd{    color: hsl(100, 100%, 60%);    a{        color: hsl(255, 80%, 70%);    }}

编译成 CSS 代码：

.xkd {  color: #77ff33;}.xkd a {  color: #9475f0;}

#### **4、hsla()函数** ####

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

##### 示例： #####

.xkd{    color: hsla(100, 100%, 60%, 0.8);    a{        color: hsla(255, 80%, 70%, 0.3);    }}

编译成 CSS 代码：

.xkd {  color: rgba(119, 255, 51, 0.8);}.xkd a {  color: rgba(148, 117, 240, 0.3);}

#### **5、red()函数** ####

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

##### 示例： #####

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

.xkd{    content: red(#fecefc);    content: green(#fecefc);    content: blue(#fecefc);}

编译成 CSS 代码：

.xkd {  content: 254;  content: 206;  content: 252;}

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

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

rgb(254, 206, 252)

#### **6、lightness()函数** ####

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

##### 示例： #####

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

.xkd{    content:lightness(#cccccc);    content:lightness(#ff0000);}

编译成 CSS 代码：

.xkd {  content: 80%;  content: 50%;}

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

#### **7、alpha()函数** ####

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

##### 示例： #####

.xkd{    content:alpha(pink);    content:alpha(rgba(125, 125, 125, 0.6));}

编译成 CSS 代码：

.xkd {  content: 1;  content: 0.6;}

#### **8、opacity()函数** ####

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

##### 示例： #####

.xkd{    content:opacity(rgba(212, 234, 124, 0.1));    content: opacity(red);}

编译成 CSS 代码：

.xkd {  content: 0.1;  content: 1;}

#### **9、mix()函数** ####

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

##### 示例： #####

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

.xkd{    content:mix(blue, green);}

编译成 CSS 代码：

.xkd {  content: #004080;}

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

#### **10、fade-in()函数** ####

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

##### 示例： #####

.xkd{    content:fade-in(rgba(100, 100, 255, 0.7), 0.1);}

编译成 CSS 代码：

.xkd {  content: rgba(100, 100, 255, 0.8);}

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

#### **11、fade-out()函数** ####

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

##### 示例： #####

.xkd{    content:fade-out(rgba(100, 100, 255, 0.7), 0.1);}

编译成 CSS 代码：

.xkd {  content: rgba(100, 100, 255, 0.6);}

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

![dec0cf58f6f19975d0d91d0a8312f586.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![9de329d4e7458d08d42f7668c6f1fa78.gif][]

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

点击“**阅读原文**”查看 120+ 篇原创文章

[02e6a6a7ac035c995c7a5a955d3de19a.png]: /images/20220829/702d4acb393b498cbad5c454825158b1.png
[dec0cf58f6f19975d0d91d0a8312f586.gif]: /images/20220829/80aae6abbab64f6f99652c5a5b976cc4.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[9de329d4e7458d08d42f7668c6f1fa78.gif]: /images/20220829/1426dafd3aaa48e8aff438d088429c55.png