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

2022-07-31 05:12:14 字數 3471 閱讀 8008

rgb顏色函式-rgb()顏色函式

主要分為rgb,hslopacity三大函式,當然其還包括一些其他的顏色函式,比如說 adjust-color 和 change-color 等。

1、rgb顏色函式

rgb 顏色只是顏色中的一種表示式,其中 r 是 red 表示紅色,g 是 green 表示綠色而b 是 blue 表示藍色。在 sass 中為 rgb 顏色提供六種函式:

1 sass -i

2 //在命令終端開啟這個命令,相當於開啟 sass 的函式計算。

3 $ sass -i

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

c82858

6 >> rgba(#

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

7 rgba(200, 40, 88, 0.65)

8 >> red(#

c82858) //從#c82858顏色值中得到紅色值 200

9 200

10 >> green(#

c82858) //從#c82858顏色值中得到綠色值 40

11 40

12 >> blue(#

c82858) //從#c82858顏色值中得到藍色值 88

13 88

14 >> mix(#

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

15 rgba(200, 40, 80, 0.65105)

2、rgba() 函式主要用來將乙個顏色根據透明度轉換成 rgba 顏色。語法有兩種格式:

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

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

rgba($color,$alpha)函式主要運用在這樣的情形之中:假設在實際中知道的顏色值是 #f36 或者 red,但在使用中,需要給他們配上乙個透明度,這個時候在原來的 css 中,首先需要通過製圖工具,得到 #f36 或 red 顏色的 r、g、b 值,而不能直接使用(注意 css3 是可以的,但是存在瀏覽器相容問題):

1

$color: #f36;

2$bgcolor: orange;

3$bordercolor:green;

同時給他們加上.5的透明度:

1

//scss

2.rgba

語法:在括號是函式的引數,第乙個參數是需要轉換的顏色,他可以是任何顏色的表達方式,也可以是乙個顏色變數;第二個引數顏色的透明度,其值是0~1之間。

1

.rgba

呼叫前面定義的變數:

1

//scss

2.rgba

將原色轉換成另外乙個顏色:

3、red() 函式

red()函式,其主要用來獲取乙個顏色當中的紅色值。假設有乙個 #f36 的顏色,如果你想得到#f36 中的 red 值是多少,這個時候使用red() 函式就能很簡單獲取。

>> red(#

f36)

255

得到的值是」255」。(注意:在命令終端要先輸入sass -i 命令)4、green() 函式green()函式和red()函式一樣,用來獲取某乙個顏色值中 green 的值。同樣拿 」#f36「 顏色為例:

>> green(#

f36)

51

5、blue() 函式同理,blue() 函式是用來獲取某乙個顏色值中 blue 的值,如:

>> blue(#

f36)

102

rgb顏色函式-mix()函式mix函式是將兩種顏色根據一定的比例混合在一起,生成另一種顏色。其使用語法如下:

mix($color-1,$color-2,$weight);
$color-1$color-2指的是你需要合併的顏色,顏色可以是任何表示式,也可以是顏色變數。

$weight為合併的比例(選擇權重),預設值為50%,其取值範圍是0~1 之間。它是每個 rgb 的百分比來衡量,當然透明度也會有一定的權重。預設的比例是 50%,這意味著兩個顏色各佔一半,如果指定的比例是 25%,這意味著第乙個顏色所佔比例為 25%,第二個顏色所佔比例為75%。

1

mix(#f00, #00f) => #7f007f

2mix(#f00, #00f, 25%) => #3f00bf

3mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

在前面的基礎上,做乙個修改:

1

//scss

2$color1: #a63;

3$color2: #fff;

4$bgcolor1: #f36;

5$bgcolor2: #e36;

6$bordercolor1:#c36;

7$bordercolor2:#b36;

8.mix

編譯的 css **:

1

//css

2.mix

這就是 mix 函式的工作原理,在函式中指定三個函式,前兩個函式是你想混合的顏色(記住,你可以通過顏色變數、十六進製制、rgba、rgb、hsl 或者 hsla 顏色值)。第三個引數是第一種顏色的比例值。

sass RGB顏色函式 RGB 顏色函式

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

Sass 顏色函式

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...

RGB表示顏色

rgb是表示顏色常用的一種方式 看完這篇文章你能就學會 科學地搞顏色 rgb的原理 首先上色圖 看懂了沒,沒看懂就對了 rgb的原理 as we all know,the rgb分別代表r red紅 g green綠 b blue藍 光的成色原理 其通用格式為 由 和6位代表rgb值的16進製制數組...