Sass 内置颜色方法

闲言碎语少扯，就让我们进入主题吧。Sass 内置了很多的方法，今天我们主要讲一下颜色函数 (Color Functions) 里的 darken()、lighten()、mix()、 lightness() 这 4 个方法。

讲真的，以前项目开发中，我也只用过前两个方法~~

在讲这几个方法之前，我们先来了解一下颜色的几个表示方法。

颜色表示

颜色的表示有很多种，本次我们只讲以下 3 种

• HEX 表示法（十六进制）
• RGB 表示法
• HSL 表示法

在 Chrome 浏览器的开发者工具里，我们可以在这 3 种方式中相互切换，如下图：

在开发中，我们经常使用 HEX 、RGB 法，但是很少使用 HSL 法，今天要讲的 Sass 颜色函数跟 HSL 有关，我们来简单了解一下 HSL 。

HSL 是色相（Hue）、饱和度（Saturation）和亮度（Lightness）这三个颜色属性的简称。

• 色相（Hue）是色彩的基本属性，就是人们平常所说的颜色名称，如紫色、青色、品红等等。
• 饱和度（Saturation）是指色彩的纯度，饱和度越高色彩越纯越浓，饱和度越低则色彩变灰变淡。
• 亮度（Lightness）指的是色彩的明暗程度，亮度值越高，色彩越白，亮度越低，色彩越黑。

下面要讲的函数跟亮度（Lightness）有很大的关系，大家提前知晓。关于 HSL 更详细的内容大家可以移步此处。

Sass 颜色函数

darken($color, $amount)

将颜色 $color 加深

$mount 是介于 0% 到 100% (含) 之间的值。按照这个值减少 $color HSL 的亮度。

// #036 的亮度为 20%, 当 darken() 减去 30% 会返回黑色
darken(#036, 30%); // black

lighten($color, $amount)

将颜色 $color 变亮

$mount 是介于 0% 到 100% (含) 之间的值。按照这个值增加 $color HSL 的亮度。

// #e1d7d2 的亮度为 85%, 当 lighten() 增加 30% 会返回白色
lighten(#e1d7d2, 30%); // white

mix($color1, $color2, $weight: 50%)

将颜色 $color1 与 $color2 混合在一起生成新的颜色

$weight 与透明度决定了每个颜色在结果里占的比重。$weight 默认值为 50%。取值范围是介于 0% 到 100% (含) 之间的值。如果指定的比例是 25% ,这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为 75%。

mix(#036, #d2e1dd); // #698aa2
mix(#036, #d2e1dd, 75%); // #355f84
mix(#036, #d2e1dd, 25%); // #9eb6bf
mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

开发中应用

以前在开发中做一些颜色交互的时候，不同状态的颜色值都需要由 UI 提供，但是有了上面的函数，我们可以跟 UI 达成一致，自动生成对应的色值。

下面提供一张图片展示 mix()、darken()、lighten() 生成颜色的效果。

lightness($color)

返回给定颜色 $color HSL 里的亮度值，返回值介于 0% 到 100% 。

lightness(#e1d7d2); // 85.2941176471%
lightness(#f2ece4); // 92.1568627451%
lightness(#dadbdf); // 86.4705882353%

开发中应用

我们可以通过这个方法来实现字体颜色根据背景色自动调整。

  // sass
  @function set-notification-text-color($color) {
    @if (lightness($color) > 50) {
      // 浅色背景返回深色字体
      @return #333;
    } @else {
      // 深色背景返回浅色字体
      @return #fff;
    }
  }

颜色转换方法

分享几个颜色转换的方法。

rgbToHex (rgbStr) {
  const color = rgbStr.toString().match(/\d+/g);
  let hex = "#";
  for (let i = 0; i < 3; i++) {
    // 'Number.toString(16)' 是JS默认能实现转换成16进制数的方法.
    // 如果结果是一位数，就在前面补零。例如： A变成0A
    hex += ("0" + Number(color[i]).toString(16)).slice(-2);
  }
  return hex;
}

hexToRgb (hex) {
  let rgb = [];
  //去除前缀 # 号
  hex = hex.substr(1);
  // 处理 "#abc" 成 "#aabbcc"
  if (hex.length === 3) {
    hex = hex.replace(/(.)/g, '$1$1');
  }
  hex.replace(/../g, function(color){
    //按16进制将字符串转换为数字
    rgb.push(parseInt(color, 0x10));
  });
  return "rgb(" + rgb.join(",") + ")";
}

rgbToHsl (rgbStr) {
  var color = rgbStr.toString().match(/\d+/g);
  var r = color[0]/255;
  var g = color[1]/255;
  var b = color[2]/255;
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min){ 
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch(max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return [h, s, l];
}