Sass關於顏色函數的樂趣

時間 2019-12-14

標籤 sass 關於顏色函數樂趣简体版

原文原文鏈接

閱讀目錄

1. 瞭解RGB和HSL顏色標準css

2. RGB函數html

3. HSL函數算法

4. Opacity函數瀏覽器

5. 其餘顏色函數sass

6. 一個簡單的應用函數

在Sass中，定義了不少現成的函數，可供咱們使用。在最初使用Sass的時候，用的最多的顏色函數就是lighten($color, $amount)和darken($color, $amount)，對於其餘的函數，少之又少，真是弱爆了，有木有。工具

切圖的時候，個人顏色所有是經過PS的吸管工具獲取的，以後複製粘貼便可。若是咱們熟悉了顏色標準，那之後咱們對顏色的認知，我想不會再是經過吸管工具獲取這種層面了。學習

1. 瞭解RGB和HSL顏色標準

A. RGB顏色標準字體

咱們都知道，紅、綠、藍，一般被咱們稱爲三原色，若是將他們以不一樣比例混合，能夠產生不少不同的顏色。RGB就是根據這一原理產生的一個表達式，R(red紅色)、G(green綠色)、B(blue藍色)。網站

rgb($red, $green, $blue)，其中，每一個值得範圍都是0~255，RGB各有256級亮度（0~255），都表明的是當前原色的亮度，最終經過計算三個色的比例得到一個顏色。咱們按照A₁²⁵⁶（256 * 256 * 256）計算，能夠得出16777216中顏色。

由於網頁顏色是以十六進制代碼表示，RGB轉16進制至關於就是十進制轉十六進制，好比rgb(234, 34, 211)，234的十六進制是EA，34的十六進制是22，211的十六進制是D3，最終轉換的十六進制表示爲：#EA22D3。

B. HSL顏色標準

H(hue色調)、S(saturation飽和度)、B(lightness亮度)，hsl($hue, $saturation, $lightness)，H取值範圍是0⁰~360⁰的圓心角，S和B都是0~100%的取值範圍。

下圖是H(色調)取值的轉盤圖，咱們須要記住六大主色：0⁰~360⁰爲紅色(red)，60⁰爲黃色(yellow)，120⁰爲綠色(green)，180⁰爲青色(cyan)，240⁰位藍色(blue)，300⁰爲紫紅色(magenta)。如hsl(300, 50%, 50%)，300就在轉盤上的300⁰，爲紫紅色。

HSL中的S(飽和度)，百分比越大，顏色中的灰色就越少，顏色越鮮豔飽和。

HSL中的L(亮度)，百分比越小，色彩越暗，越接近於黑色；百分比越大，色彩越亮，越接近於白色。

2. RGB函數

在Sass中，共有六種RGB函數：

rgb($red, $green, $blue) //根據RGB中的三個值計算出一個顏色；
rgba($red, $green, $blue, $alpha) //根據RGB中紅、綠、藍和透明度計算出一個顏色；
red($color) //獲取RGB中的紅色值；
green($color) //獲取RGB中的綠色值；
blue($color) //獲取RGB中的藍色值；
mix($color1, $color2, [$weight]) //混合兩種顏色；

在實際的應用中，咱們主要用到其中rgb( )，rgba( )，mix( )這三個函數。對於不多用到的red( )、green( )、blue( )這三個函數，我以爲在咱們寫Sass時，是沒有多大意義的，最多在設置顏色變量的時候能夠用到。咱們能夠在Ruby的命令控制檯輸入Sass命令，能夠查看結果。

在Ruby命令控制檯，要運行Sass相關的計算和函數，首先要作轉換，輸入sass -i，開啓Sass的函數計算。

sass -i
>> $colorMain: orange
#ffa500
>> red($colorMain)
255
>> green($colorMain)
165
>> blue($colorMain)
0
>> rgb(255, 165, 0)
#ffa500

從上面的結果能夠看出，rgb( )函數最終轉換的結果是十六進制表達式，對於上面這幾個函數了解這麼多，我認爲就可了。

A. rgba($red, $green, $blue, $alpha)函數

$alpha表示透明度，取值範圍0~1，函數最終的返回值是RGBA值。

body {
  background: rgba(255, 165, 0, 0.5);
}

編譯後的CSS樣式：

body {
  background: rgba(255, 165, 0, 0.5);
}

rgba( )函數還有另外一種形式的函數，只有兩個變量，rgba($color, $alpha)，函數返回值和上面這種形式的結果是同樣的。在實際應用中，後者用的比較多。

$colorMain: orange;
body {
  background: rgba($colorMain, 0.5);
}

編譯後的CSS樣式：

body {
  background: rgba(255, 165, 0, 0.5);
}

B. mix($color1, $color2, [$weight])函數

$weight表示的混合的權重，默認值爲50%，指的第一個顏色$color1的比例，取值範圍爲0~100%，函數最終的返回值是顏色的十六進制表達式。

$color1: orange;
$color2: green;
body {
  background: mix($color1, $color2, 0.6);
}

編譯後的CSS樣式：

body {
  background: #028000;
}

3. HSL函數

在Sass中，共有13種HSL函數：

hsl($hue, $saturation, $lightness) //根據HSL中的三個值計算出一個顏色；
hsla($hue, $saturation, $lightness, $alpha) //根據HSL中色調值、飽和度、亮度和透明度計算出一個顏色；
hue($color) //獲取HSL中的色調值；
saturation($color) //獲取HSL中的飽和度；
lightness($color) //獲取HSL中的亮度值；
adjust-hue($color, $degree) //改變HSL中的色調值；
lighten($color, $amount) //顏色變淺函數；
darken($color, $amount) //顏色變深函數；
saturate($color, $amount) //增長顏色的飽和度；
desaturate($color, $amount) //減小顏色的飽和度；
grayscale($color) //將該顏色轉換爲相對應的灰度顏色；
complement($color) //獲取該顏色值旋轉180度後相對應的顏色；
invert($color) //和complement類似，獲取該顏色值旋轉180度後相對應的顏色，不過不能改變透明度；

跟RGB函數相似，hue( )、saturation( )、lightness( ) 這三個函數在Sass實際應用中，沒有多少意義的，咱們只需在Ruby的命令控制檯中瞭解一下結果就好。

sass -i
>> $colorMain: orange
#ffa500
>> hue($colorMain)
38.82353deg
>> saturation($colorMain)
100%
>> lightness($colorMain)
50%
>> hsl(38, 100%, 50%)
#ffa200
>> hsla(38, 100%, 50%, 0.5)
rgba(255, 162, 0, 0.5)

看上面，hsl( )函數返回值的結果也是顏色十六進制表達式，hsla( )函數返回值的結果是RGBA值。

A. hsla($hue, $saturation, $lightness, $alpha)函數

一樣的，$alpha表示的是透明度，取值範圍在0~1。函數是經過H(色調值)、S(飽和度)、L(亮度)來獲取的RGB值。

B. adjust-hue($color, $degree)色調調節函數

$degree表示的改變色調度數的值，能夠是正數，也能夠是負數。若是爲正數，在HSL顏色轉盤上順時針旋轉相應的$degree，旋轉以後的度數就是顏色的色調值；若是是負數，逆時針旋轉便可。舉個最簡單的例子：

body {
  background: adjust-hue(red, 60deg);
}

編譯後的CSS樣式：

body {
  background: yellow;
}

查看顏色轉盤，旋轉60度，結果就是黃色。

C. lighten($color, $amount)變淺函數和darken($color, $amount)變深函數

$amount是調節顏色的亮度，取值範圍是0~100%。

$colorMain: #3d48de;
.lighten {
  background-color: lighten($colorMain, 15%);
}
.darken {
  background-color: darken($colorMain, 25%);
}

編譯後的CSS樣式：

.lighten {
  background-color: #7e86e9;
}
.darken {
  background-color: #171e85;
}

效果：原來顏色、變淺顏色、加深顏色

D. saturate($color, $amount)增長飽和度函數和desaturate($color, $amount)減小飽和度函數

$amount是調節顏色的飽和度，取值範圍爲0~100%。

$colorMain: #3d48de;
.saturate {
  background-color: saturate($colorMain, 15%);
}
.desaturate {
  background-color: desaturate($colorMain, 25%);
}

編譯後的CSS樣式：

.saturate {
  background-color: #2c39ef;
}
.desaturate {
  background-color: #5960c2;
}

效果：原來顏色、飽和度增長了的顏色、飽和度減小了的顏色

E. grayscale($color)灰度函數

把$color顏色轉換爲相應的灰度顏色。

$colorMain: #5960c2;
body {
  background-color: grayscale($colorMain);
}

編譯後的CSS樣式：

body {
  background-color: #8e8e8e;
}

F. complement($color)函數和invert($color)函數

這兩個函數的區別就是透明度的改變，invert( )不可改變透明度。

$colorMain: #5960c2;
body {
  background-color: complement($colorMain);
}
.div {
  background-color: invert($colorMain);
}

編譯後的CSS樣式：

body {
  background-color: #c2bb59;
}

.div {
  background-color: #a69f3d;
}

效果：原來顏色、complement( )計算後的顏色、invert( )計算後的顏色

4. Opacity函數

在Sass中關於Opacity函數共有四種：

alpha/opacity($color) //獲取顏色的透明度；
rgba($color, $alpha) //改變顏色的透明度；
opacify/fade-in($color, $amount) //讓顏色更加不透明；
transparentize/fade-out($color, $amount) //使顏色更加透明化；

咱們在寫CSS的時候，都用到過opacity這個屬性來設置元素的透明度，他控制的是整個元素的透明度，元素上若是有字體或者層，都將會繼承透明度。若是用rgba( )函數、hsla( )函數，或者transforms屬性來設置元素的透明度，只是針對顏色上的透明，不會改變元素中的子元素透明度。因此，用rgba( )函數和hsla( )函數來製做透明背景，是不錯的選擇。

Opacity函數主要針對的也是顏色的透明度。

A. alpha/opacity($color)函數和rgba($color, $alpha)函數

在RGB函數的時候，就說了rgba( )的兩種形式。

$colorMain: red;
$colorAlpha1: rgba(red, 0.8);
$colorAlpha2: rgba(red, 0.5);
body {
  background-color: rgba($colorMain, alpha($colorAlpha1));
}
.div {
  background-color: rgba($colorMain, opacity($colorAlpha2));
}

編譯後的CSS樣式：

body {
  background-color: rgba(255, 0, 0, 0.8);
}
.div {
  background-color: rgba(255, 0, 0, 0.5);
}

固然，咱們沒有必要在設置了$colorAlpha1和$colorAlpha1這兩個變量，再用alpha/opacity($color)函數去獲取他們的透明度，這裏只是舉例說明一下。

B. opacify/fade-in($color, $amount)透明化/漸隱函數和transparentize/fade-out($color, $amount)不透明化/漸現函數

$amount表示的是增長或者減小透明度的值，取值範圍是0~1。opacify/fade-in( )函數是要原始顏色的透明度加上$amount，transparentize/fade-out( )函數是要原始顏色的透明度減去$amount。

$colorMain: rgba(#3d48de, 0.3);
$funcData: opacify, fade-in, transparentize, fade-out;
@mixin func($funcName) {
  @if $funcName == opacify {
    background-color: opacify($colorMain, 0.5);
  }@else if $funcName == fade-in {
    background-color: fade-in($colorMain, 0.5);
  }@else if $funcName == transparentize {
    background-color: transparentize($colorMain, 0.2);
  }@else if $funcName == fade-out {
    background-color: fade-out($colorMain, 0.2);
  }
}
@each $value in $funcData {
  .div-#{$value} {
    @include func($value);
  }
}

編譯後的CSS樣式：

.div-opacify {
  background-color: rgba(61, 72, 222, 0.8);
}
.div-fade-in {
  background-color: rgba(61, 72, 222, 0.8);
}
.div-transparentize {
  background-color: rgba(61, 72, 222, 0.1);
}
.div-fade-out {
  background-color: rgba(61, 72, 222, 0.1);
}

不難看出，opacify/fade-in( )函數使得顏色的透明度變爲0.8，顏色更加的透明；transparentize/fade-out( )函數使得顏色的透明度變爲0.1，顏色更加不透明。

5. 其餘顏色函數

關於顏色函數，除了上面三大類，還有下面四種：

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) //調整一個或者多個屬性；
scale-color($color, [$red], [$green], [blue], [$saturation], [$lightness], [$alpha]) //調整一個或者多個屬性，獲取一個流暢的顏色；
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) //調整一個或者多個屬性；
ie-hex-str($color) //將一個顏色轉換爲ie濾鏡使用的顏色；

A. adjust-color( )函數和change-color( )函數

$red、$green、$blue，不用說，都知道是調整$color的RGB值，取值範圍在0~255之間。

$hue是色調值，在0⁰~359⁰以前的正數或者負數。

$saturation、$lightness分別爲飽和度和亮度，取值範圍在0~100%的正數或者負數。

$alpha是透明度，在0~1之間取值。

在上面的函數中，$color參數是必需的，後面能夠跟一個參數，也能夠是多個。不過，要注意，不能同時調整RGB值和HSL值。

$colorMain: rgba(#3d48de, 0.3);
.div-01 {
  background-color: change-color($colorMain, $red: 123);
}
.div-02 {
  background-color: adjust-color($colorMain, $red: 123);
}

編譯後的CSS樣式：

.div-01 {
  background-color: rgba(123, 72, 222, 0.3);
}
.div-02 {
  background-color: rgba(184, 72, 222, 0.3);
}

觀察編譯以後的CSS樣式，同時給兩個函數中的$red賦值爲123，發現change-color( )函數的R值被替換爲123，而adjust-color( )函數爲184。$colorMain變量的R值爲61，因此184是123 + 61所得的結果。

咱們能夠得出如下結論：

change-color( )函數是將原來的函數的RGB值、HSL值、透明度值，直接被替換。

adjust-color( )函數是以後參數的賦值加上原來的函數相對應的值，最終獲取的顏色。

B. scale-color( )函數

scale-color( )和上面兩個函數的區別就是參數值的變化，除了$color參數，其餘的參數取值範圍都是0~100%的正數或者負數。一樣的，不能同時調整RGB值和HSL值。（表示對這個函數的計算研究了很久T_T）

$colorMain: rgba(#3d48de, 0.3);
$funcData: change-color, adjust-color, scale-color, ie-hex-str;
@mixin func($funcName) {
  @if $funcName == change-color {
    background-color: change-color($colorMain, $red: 123);
  }@else if $funcName == adjust-color {
    background-color: adjust-color($colorMain, $red: 123);
  }@else if $funcName == scale-color {
    background-color: scale-color($colorMain, $red: 20%);
  }@else if $funcName == ie-hex-str {
    background-color: ie-hex-str($colorMain);
  }
}
@each $value in $funcData {
  .div-#{$value} {
    @include func($value);
  }
}

編譯後的CSS樣式：

.div-change-color {
  background-color: rgba(123, 72, 222, 0.3);
}
.div-adjust-color {
  background-color: rgba(184, 72, 222, 0.3);
}
.div-scale-color {
  background-color: rgba(100, 72, 222, 0.3);
}
.div-ie-hex-str {
  background-color: #4D3D48DE;
}

scale-color( )函數最後得的結果是將R值轉變爲100，在RGB中，R的值爲0~255，原來顏色的R值爲61，首先獲取原顏色的R值和255之間差值，取得差值的20%，而後加上原來顏色的R值61,也就是(255 - 61) * 20% + 61= 100。若是$red爲-20%，那將取的是原來顏色的R值與0之間的差值，用原來顏色R值減去差值的20%，也就是61 - (61 - 0) * 20% = 49，最後四捨五入。

總結以下：

$red、$green、$blue用0和255計算差值。

$saturation、$lightness、$alpha用0%和100%計算差值。

C. ie-hex-str($color)ie濾鏡函數

ie有本身的一套Filter濾鏡算法，對於低版本的IE瀏覽器，咱們可使用ie濾鏡實現目前CSS3不少的效果，解決低版本瀏覽器對有些效果的不兼容。

6. 一個簡單的應用

在Sass應用中，一般只須要定義一個顏色變量便可，而後以後的顏色，咱們能夠用函數計算得到就好。這種方式的好處在於，若是咱們以後須要修改顏色，只須要修改一處便可。

例如，如今須要定義一個網站中的一些顏色，咱們須要肯定主顏色。咱們能夠參考Sass中文官網來簡單說明一下，連接地址：http://sass.bootcss.com/docs/sass-reference/。

這是Sass中文官網的部分截圖，方框中是網頁中出現的顏色。能夠看出，網頁主顏色爲$colorMain: #c6538c，咱們就能夠根據主顏色來計算其餘顏色了。

$colorMain: #c6538c; //網頁主顏色
$colorHover: darken($colorMain, 10%); //鼠標通過顏色
$colorBgGray: lighten(grayscale($colorMain), 40%); //代碼部分和菜單鼠標通過的背景顏色
$colorBorder: lighten(grayscale($colorMain), 30%) lighten(grayscale($colorMain), 35%); //邊框顏色
$colorTextLink: #008cba; //文本連接顏色

對於顏色，我定義了5個變量，這裏的百分比參數，我沒有精確設置，若是想要精確設置，能夠利用上面的RGB函數來計算。對於文本連接的顏色，我並無用主顏色去算，連接的顏色通常都偏向於藍色，因此直接賦值就好。

若是咱們將網站的主顏色修改成$colorMain: #008cba，那麼網頁其餘的顏色也就跟着變換，這個對於咱們以後更改顏色，會節省不少的時間。

相關連接：Sass學習筆記