lighten 还有 darken 这两个函数，可以改变颜色的明度 ... lighten 让颜色更亮，darken 会让颜色更暗 ... 这里我先定义了一个叫 $base-color 的变量，它的值是一种蓝色 ... 下面，我们再用 lighten 还有 darken 这两个函数去处理这个颜色 .. 然后再分别交给一个变量 ...

先定义一个变量 ... 叫做 $light-color ... 它是更亮的 $base-color ... 它的值是用 lighten 函数处理之后的 $base-color ... 输入 lighten ... 这个函数有两个参数 ... 第一个参数是要处理的颜色，这里用 $base-color 这个变量来表示，逗号分隔一下，再定义第二个参数 ... 这个参数的值就是要给颜色增加的明度 .. 输入 30% ...

$base-color 现在这个颜色里面的 L ，也就是明度的值是 50% ，增加了 30% 以后，$light-color 这个颜色的明度的值应该就是 80% 了 ...

在它下面再去定义一个变量 ... 叫做 $dark-color ，它的值可以使用一个 darken 函数去处理一下 $base-color 这个颜色 ... 这个函数可以减小颜色的明度 ... 这里用一个 20% ... 也就是 $dark-color 这个颜色相比 $base-color 这个颜色，它的明度的值会减小 20% ，也就是它的明度的值会是 30% ..

我们再去定义一块样式 ... 用一个类选择器 ... .alert ... 加上一个 border 属性 ... 这个边框的颜色可以使用 $base-color ... 再用一个背景颜色的属性 ... background-color ... 它的值使用 $light-color 这个颜色 ... 最后再添加一个 color 属性 ... 我们把 $dark-color 这个颜色交给这个属性 ...

保存 ... 右输出的结果里面，Sass 会把颜色换算成十六进制的形式 ... border 里的颜色是 $base-color ... background-color 里面是 $light-color ... shift + command + C ... 这个颜色会比 $base-color 要亮一些 ... 最后这个 color 属性的值，就是加深之后的 $base-color 代表的颜色 ...

我们再打开编辑器的拾色器来理解一下 ... 点击 $base-color 的值 .. 打开拾色器 ... 在这个视频里我们使用 lighten 这个函数，加亮了这个颜色 30% ... 也就是这个加亮以后的颜色它的明度就变成了 80% ... 按住这个小圆圈 ... 向左移动 ... 得到的颜色，大概是这个样子 ...

$dark-color 这个颜色是用 darken 加深了 20% 之后的颜色，也就是当前的颜色减去 20% 的明亮 ... 向下移动这个小圆圈 ... 得到的颜色大概是这个样子的 ...