saturate 可以增加颜色的纯度，也就是饱和度，跟它相反的是 desaturate 这个函数，它可以减少颜色的纯度。下面我们去试一下这两个函数。这里我事先定义了一个变量。它的值是一个用 hsl 表示的颜色 .. 你也可以使用十六进制的颜色交给这两个函数去处理。

在这个变量的下面，再去定义两个变量 ... 这个可以叫做 $saturate-color ... 它的值是基于 $base-color 这个颜色提高纯度的颜色 ... 可以使用 saturate 这个函数 ... 它有两个参数 ... 第一个参数是要处理的颜色值 ... 这里用 $base-color 来表示 ... 逗号分隔一下，再去指定它的第二个参数 ... 就是要增加的饱和度 ... 这里设置成 50% ... 这样，这个颜色的饱和度就会变成 100% ... 因为原来的颜色的饱和度是 50% ... 再加上一个 50% 就是 100% ..

另起一行，再去定义一个变量 ... 命名为 $desaturate-color ... 它的值可以使用 desaturate 这个函数 ... 这个函数也有两个参数 ... 首先是要处理的颜色 ... 这里就是 $base-color ... 再输入一个逗号 ... 然后是要减少的饱和度 ... 设置成 30% ... 这样这个颜色的值，它的饱和度就会是 50% - 30% ，也就是 20% ...

在下面，再去定义两块样式 ... .alert ... 用一个 background-color ... 它的值设置成 $saturate-color ... 再添加一个 .alert-info ... 同样添加一个 background-color 属性，它的值设置成 $desaturate-color ..

保存 ... 在右边你会看到输出的结果 ... 这个 .alert 里面的背景颜色的值，就是用 saturate 函数处理的 $base-color ，也就是增加了 50% 纯度的颜色 ...

下面的 .alert-info 里面的背景颜色的值，是用 desaturate 函数处理的 $base-color ... 就是减少了 30% 饱和度之后的颜色 ...

我们再打开编辑器的拾色器来理解这两个函数的作用 ... 点击这个 $base-color 的值 ... shift + command + C ... Windows 上是 shift + ctrl + C ...

saturate 这个函数做的事就是相当于我们把这个小圆圈向右上角这个方向去移动 ... desaturate 函数做的是相反的事 ... 它相当于是向左下方去移动这个小圆圈 ...