Sass 顏色函式

2022-02-21 06:16:05 字數 1504 閱讀 1665

1/*2

* sass 顏色函式

3* rgb 顏色函式

4* 1. rgb($red,$green,$blue):根據紅、綠、藍三個值建立乙個顏色;

5* rgb(200,40,88) //根據r:200,g:40,b:88計算出乙個十六進製制顏色值

6* #c82858

7* 2. rgba($red,$green,$blue,$alpha):根據紅、綠、藍和透明度值建立乙個顏色;

8* rgba(#c82858,.65) //根據#c82858的65%透明度計算出乙個rgba顏色值

9* rgba(200, 40, 88, 0.65)

10* 3. red($color):從乙個顏色中獲取其中紅色值;

11* red(#c82858) //從#c82858顏色值中得到紅色值 200

12* 200

13* 4. green($color):從乙個顏色中獲取其中綠色值;

14* green(#c82858) //從#c82858顏色值中得到綠色值 40

15* 40

16* 5. blue($color):從乙個顏色中獲取其中藍色值;

17* blue(#c82858) //從#c82858顏色值中得到藍色值 88

18* 88

19* 6. mix($color-1,$color-2,[$weight]):把兩種顏色混合在一起。

20* mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 兩顏色按比例混合得到乙個新顏色

21* rgba(200, 40, 80, 0.65105)

22*/

2324

/*25

* rgba() 其語法主要有兩種格式

26* 1. rgba($red,$green,$blue,$alpha) //將乙個rgba顏色轉譯出來,和未轉譯的值一樣

27* 2. rgba($color,$alpha) //將乙個hex顏色轉換成rgba顏色

28*/

29$color: #f36;

30.rgba

33/*

34* mix() 語法如下

35* mix($color-1, $color-2, $weight);

36* $color-1 和 $color-2 指的是你需要合併的顏色,顏色可以是任何表示式,也可以是顏色變數。

37* $weight 為 合併的比例(選擇權重),預設值為 50%,其取值範圍是 0~1 之間。

38* 第三個引數是第一種顏色的比例值。

39*/

40$color1: #a63;

41$color2: #fff;

42.mix

輸出:

1

.rgba 34

.mix

Sass函式 顏色函式 RGB顏色函式

rgb顏色函式 rgb 顏色函式 主要分為rgb,hsl和opacity三大函式,當然其還包括一些其他的顏色函式,比如說 adjust color 和 change color 等。1 rgb顏色函式 rgb 顏色只是顏色中的一種表示式,其中 r 是 red 表示紅色,g 是 green 表示綠色而...

sass多個顏色文字

沒什麼技術含量,完全就當日記寫 場景 遇到乙個列表,裡面花花綠綠的,有很多種顏色,就用span來包,但是顏色呢,我又不想乙個乙個寫color,正好顏色要求不高,就用標準的red green這種來寫,所以就起了redspan greenspan這樣的類名,這樣一看,如果不用sass寫的好看點真的過不去...

sass RGB顏色函式 RGB 顏色函式

在 sass 的官方文件中,列出了 sass 的顏色函式清單,從大的方面主要分為 rgb hsl 和 opacity 三大函式,當然其還包括一些其他的顏色函式,比如說 adjust color 和 change color 等。在這章節中,將主要和大家一起 sass 顏色函式中常見的 rgb hsl...