我们也可以使用 hsl 的方式来表示一种颜色，hsl 表示三种东西，色相，饱和度，还有明度 ... 色相的值是从 0 到 360 度，饱和度是从 0 到 100% ，明度也是从 0 到 100% ...

hsl 这个函数可以根据这三个东西的值来创建颜色 ... 比如我们想要纯红色 ... 先用一个 hsl 函数 ... 色相的值设置成 0 度 ... 饱和度是 100% ... 明度是 50% ...

body {
background-color: hsl(0, 100%, 50%);
}

你会看到，得到的结果是用字符表示的颜色，red 就是红色 ... 这里我们再把色相的值设置成 60 ... 饱和度与明度不变 ... 保存 ... 结果会是 yellow ... 黄色 ...

想要颜色里面加上 alpha 通道，也就是设置颜色的不透明度 ... 可以使用 hsla 这个函数 ... 前三个值仍然是色相，饱和度还有明度 ... 最后一个值用来表示颜色的不透明度 ... 是从 0 到 1 之间的数字，0 表示完全透明，1 表示完全不透明 ... 这里我们设置成 0.5 ...

background-color: hsla(0, 100%, 50%, 0.5);

保存 ... 你会发现，输出的 CSS 里面，会用 rgba 这个函数来表示 ... 也就是 Sass 会把用 hsla 表示的颜色，转换成用 rgba 表示的颜色 ...

在浏览器打开使用这个样式表的页面 ... 这里你会看到，页面的背景是半透明的黄色 ...

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