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];
}
複製代碼