http://sass-lang.com/documentation/Sass/Script/Functions.html#opacity_fu...

想让一个颜色更透明一些，可以使用 transparentize 这个函数 ... 相反的，想增加颜色的不透明度，可以使用 opacify 这个函数去处理指定的颜色 ...

这两个函数的就是去修改颜色的 alpha 的值，也就是颜色的不透明度，这个值是从 0 到 1 之间的数字 ... 0 表示完全透明，1表示完全不透明 ...

这里我先定义了一个颜色，用的是 hsla 这个函数 ... 最后的 0.5 表示的就是 a 的值 .. （预览）

在它下面，再去定义两个变量 ... 先定义一个变量，可以叫它 $fade-in-color ... 它的值，是用 opacify 处理之后的颜色 ... 这个函数可以增加颜色的不透明度 ... 让颜色变得更不透明 ...

它有两个参数，第一个参数是要处理的颜色 ... 这里我们用 $base-color 来表示 ... 第二个参数是要增加的不透明度的量 ... 设置成 0.3 ... 这样这个颜色的不透明度应该就是颜色原来的 0.5 加上这个 0.3 ，也就是 0.8 ...

再去定义一个变量 ... 这个叫做 $fade-out-color ... 这里在我们再用 transparentize 这个函数 ... 它可以让颜色变得更透明一些 ... 同样这个函数也有两个参数，第一个参数是要处理的颜色 ... $base-color ... 第二个参数是要增加的透明度，或者说减少的不透明度 ... 设置成 0.3 .... 这样这个颜色的不透明度的值就会是 0.5 减去这个 0.3 ，也就是 0.2 ...

在下面，再去添加一块样式 ... .alert ... 先用一个 background-color ... 它的值可以设置成 $fade-in-color ... 再添加一个 border ... 这个边框的颜色可以设置成 fade-out-color ...

保存 ... 在右边会显示出 Sass 编译之后的 CSS ... 这里会用 rgba 的形式去表示颜色 ... 最后的这个小数表示的就是颜色的不透明度 .. 用 $fade-in-color 表示的颜色，它的不透明度是 0.8 ... 用 $fade-out-color 表示的颜色，它的不透明度的值是 0.3 ...

再点一下这个 $base-color 颜色 ... shift + command + C ... 使用 opacify 处理这个颜色，相当于是把这个调整不透明度的滑块，向上移动 ... 让颜色变量更不透明 ...

用 transparentize 这个函数处理颜色，相当于是把这个滑块向下去移动 ... 也就是让颜色变得更透明一些 ...