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

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

主要分為rgb,hsl和opacity三大函式，當然其還包括一些其他的顏色函式，比如說 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的透明度：

//scss

2.rgba

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

.rgba

呼叫前面定義的變數：

//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 **：

//css

2.mix

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

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

sass RGB顏色函式 RGB 顏色函式

Sass 顏色函式

RGB表示顏色

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

sass RGB顏色函式 RGB 顏色函式

Sass 顏色函式

RGB表示顏色

相關推薦

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