Sass Maps 的函數-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函數是用來刪除當前$map中的某一個$key,從而得到一個新的 map,其返回的值是一個map.他並不能直接從 ...
Sass Maps 的函數-map-remove($map,$key),keywords($args)
map-remove($map,$key)
map-remove($map,$key)函數是用來刪除當前$map中的某一個$key,從而得到一個新的
map,其返回的值是一個map.他並不能直接從一個map 中刪除另一個map，僅能通過刪除
map中的某個key 得到新的map
$map:map-remove($social - colors,dribble);
返回的是一個新map
$map:(
facebook:#3b5998,
github:#171515,
google:#db4437,
twitter:#55acee
);
keywords($args)
keywords($args)
keywords($args) 函數可以通過混合巨集或函數的參數變創建map.
參數也是成對出現，其中$args 變成key(會自動去掉$符號)，而
$args對應的的值是value.
@mixin map($args...){
@debug keywords($args);
}
@include map(
$dribble: #ea4c89,
$facebook:#3b5998,
$github:#171515,
$google:#db4437,
$twitter:#55acee
);
RGB 顏色函數-RGB()顏色函數
在Sass 的官網文檔中，列出了Sass 的顏色函數清單，從大的方面主要分為RGB，HSL 和 Opacity 三大函數，
當然其還包括一些其他的顏色函數，比如說adjust-color和chang-color 等。
1.RGB 顏色函數
RGB顏色只是顏色中的一種表達式，其中R 是red 表示紅色，G是green 表示綠色而 B 是blue 表示藍色
在Sass 中為RGB 顏色提供六種函數：
rgb($red,$green,$blue):根據紅，綠，藍三個值創建一個顏色
rgba($red,$green,$blue,$alpha):根據紅，綠，藍和透明度創建一個顏色。
red($color):從一個顏色中獲取其中紅色值：
green($color):從一個顏色總或者去其中綠色值：
blue($color):從一個顏色中獲取其中藍色值：
mix($color-1,$color-2,[$weight]):把梁總顏色混合在一起。
$ sass -i
>>rgb(200,40,88) //根據r:200， g:40, b；88 計算出一個十六進位顏色值。
#c82858
>> rgba(#c82858,.65) //根據#c82858 的65%透明度計算 出一個rgba顏色值。
rgba(200,40,88,0.65)
>>red(#c82858) //#c82858 顏色中得到紅色值、
200
200
>> green(#c82858) //從#c82858 顏色中得到藍色值
88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858 和rgba(200,40.88..65)兩顏色按比例混合得到一個新顏色
rgba(200,40,80,0.65105)
RGB 顏色函數-RGBA() 函數
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 是可以的，但是存在瀏覽器相容問題）：
//CSS
color: rgba(#f36,.5); //在css中，這是無效的寫法
$color: #f36;
$bgColor: orange;
$borderColor:green;
//SCSS
.rgba {
color: rgba(#f36,.5);
background: rgba(orange,.5);
border-color: rgba(green,.5);
}
語法：
在這個實例中，我們使用了 Sass 的 rgba 函數，在括弧是函數的
參數，第一個參數是需要轉換的顏色，他可以是任何顏色的表達方
式，也可以是一個顏色變數；第二個參數是顏色的透明度，其值是
0~1 之間。上面的代碼轉譯出來：
.rgba {
color: rgba(255, 51, 102, 0.5);
background: rgba(255, 165, 0, 0.5);
border-color: rgba(0, 128, 0, 0.5);
}
來看一個調用前面定義的變數
//SCSS
.rgba {
color: rgba($color,.5);
background: rgba($bgColor,.5);
border-color: rgba($borderColor,.5);
}
編譯出來的 css 代碼：
//CSS
.rgba {
color: rgba(255, 51, 102, 0.5);
background: rgba(255, 165, 0, 0.5);
border-color: rgba(0, 128, 0, 0.5);
}
RGB 顏色函數-Red(),Green(),Blue函數
3.Rred() 函數
red() 函數非常簡單，其主要作用獲取一個嚴重的紅色值，假設沒有一個#f36 的顏色，如果你想得到#f36中 的red
指示多少，這個時候使用red() 函數就能很簡單獲取。
>> red
255
4，Green 函數
green() 函數和red 函數一樣，用來獲取某個顏色中green的值，同樣拿“#f36” 顏色為例
>>green(#f36)
51
5.Blue() 函數
同理，blue () 函數是用來獲取某個值顏色中bliue 的值
>> 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%。
其使用方法很簡單
mix(#f00,#00f) =>#7f007f
mix(rgba(255,0,0,0.5),#00f) =>rgba(63,0,191.0.75)
在前面的基礎上，做一個修改
//SCSS
$color1:#a63;
$color2:#fff;
$bgColor1:#f36;
$bgColor2:#e36;
$borderColor1:#c36;
$borderColor2:#b36;
.mix{
background:mix($bgColor1,bgColor2,.75);
color:mix($color1,$color2,.25);
border-color:
mix($borderColor1,(bgColor2,.05));
}
編譯出來的css 代碼
//css
.mix{
background:#ee3366;
color:#fefefe;
border-color:#ed33
}
HSL 函數簡介
在 Sass 中提供了一系列有關於 HSL 的顏色函數，以供大家使用，
其中常用的有 saturation、lightness、adjust-hue、lighten、darken
等等。接下來我們先來瞭解一下 HSL 顏色函數包括哪些具體的函數，所起的作用是什麼：
1，hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色；
2，hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色；,
3，hue($color)：從一個顏色中獲取色相（hue）值；
4，lightness($color)：從一個顏色中獲取亮度（lightness）值；
5，darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色；
6，saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色
7，desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色；
8，grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);
9，complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);
10，invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。
同樣在你的終端，通過 sass -i 來對上面的各個函數做一個簡單測試：
>> hs1(200,30%,60%) // 通過還h200,s30% l60% 創建一個顏色
#7aa3b8
>>hsla(200,30%,60%,.8) // 通過h200,s30%,160%,a80% 創建一個顏色
rgba(122,163,184,0.8)
>> hue(#7ab) // 得到#7ab 顏色的色相值
195deg
>> saturation(#7ab) // 得到#7ab 顏色的飽和度值
33.33333%
>>lightness(#7ab) // 得到#7ab 顏色的亮度
60%
>> adjust-hue(#f36,150deg ) // 改變#f36 顏色的色相值為 150deg
#33ff66
>> lighten(#f36,50%) // 把#f36 顏色高度提高50%
#ffffff
>>darken(#f36,50%) //把#f36 顏色亮度提高50%
#33000d
>>saturate(#f36,50%) //把#f36 顏色飽和度提高50%
#ff3366
>>desaturate(#f36,50%) //把#f36 顏色飽和度降低50%
#cc667f
>>grayscale(#f36) // 把#f36 顏色變成灰色
#999999
>>complement(#f36)
#33ffcc
>>invert(#f36)
#00cc99
HSL函數-lighten()
lighten() 和 darken() 兩個函數都是圍繞顏色的亮度值做調整的，
其中 lighten() 函數會讓顏色變得更亮，與之相反的 darken() 函數
會讓顏色變得更暗。這個亮度值可以是 0~1 之間，不過常用的一
般都在 3%~20% 之間。
來看一個簡單的實例，首先頂一個一個顏色變數
$baseColor:#ad141e;
使用lighten()和darken() 函數來修改10% 的亮度值：
// SCSS
.lighten{
background:lighten($baseColor,10%)
}
.darken{
background:darken($baseColor,10%)
}
編譯出來的css 代碼
//CSS
.lighten{
background:#db1926;
}
.darken{
background:#7f0f16;
}
HSL 函數-saturate()
saturate(),desaturate() 這兩個函數是通過改變顏色的飽和度來得到
一個新的顏色，我們和前面介紹的修改亮度得到新顏色的方法非常相似。
// SCSS
$baseColor: #ad141e;
.saturate{
background:saturate($baseColor,30%); //在原色飽和度基礎上增加飽和度
}
.desaturate{
background:desaturate($baseColor,30%); // 在原色飽和度基礎上減少飽和度。
}
// 編譯出來的css 代碼
// CSS
.saturate{
background:#c1000d;
}
.desaturate{
background:#903137;
}
HSL 函數-adjust-hue() 函數
這個是通過調整顏色的色相換算一個新顏色。他需要一個顏色和色
相度數值。通常這個度數值是在 -360deg 至 360deg 之間，當然了可以是百分數：
//SCSS
$baseColor:#ad14le;
.adjust-hue-deg{
background:adjust-hue($baseColor,30deg);
}
.adjust-hue-per{
background:adjust-hue($baseColor,30%);
}
編譯出來的css 代碼
// css
.adjust-hue-deg{
background:ad5614;
}
.adjust-hue-per{
background:#ad5614;
}
HSL 函數-grayscale() 函數
這個函數會顏色的飽和度值直接調至 0%，所以此函數與 desaturate($color,100%)
所起的功能是一樣的。一般這個函數能將彩色顏色轉換成不同程度的灰色。例如：
// SCSS
$baseColor:#ad141e;
.grayscale{
background:grayscale($baseColor);
}
.desaturate{
background:desaturate($baseColor,100%)
}
編譯出來的css 代碼
//css
.grayscale{
background:#616161;
}
.desaturate{
background:#616161;
}
Opacity 函數介紹
在 CSS 中除了可以使用 rgba、hsla 和 transform 來控制顏色透明度
之外，還可以使用 opacity 來控制，只不過前兩者只是針對顏色上的
透明通道做處理，而後者是控制整個元素的透明度。
在 Sass 中，也提供了系列透明函數，只不過這系列的透明函數主要用來處理顏色透明度：
alpha($color) / opacity($color) 獲取顏色透明度
rgba($color,$alpha):改變顏色的透明度值。
opacify($color,$amount)/ fade-in($color,$amount): 使顏色更加不透明
transparentize($color,$amount) / fade-out($color,$amount) 使顏色更加透明。
Opacity 函數-alpha(),opacity() 函數
alphpa() 和opacity() 函數很簡單，與前面介紹的red()，green() 等函數
數很類似。這個函數的主要功能是用來獲取一個顏色的透明度值。如
果顏色沒有特別指定透明度，那麼這兩個函數得到的值都會是 1：
>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>>opacity(red)
1
>>opacity(rgba(red,.8))
.8
Opacity 函數-rgba() 函數
在前面介紹 RGB 函數一節中，還記得嗎？有一個 rgba() 函數可以創
建一個顏色，同時還可以對顏色修改其透明度。其可以接受兩個參數，
第一個參數為顏色，第二個參數是你需要設置的顏色透明值。
>>rgba(red,.5)
rgba(255,0,00.5)
>>rgba(#dedede,.5)
rgba(222,222,222,0.5)
>>rgba(rgb(34,45,44),.5)
rgba(34, 45, 44, 0.5)
>> rgba(rgba(33,45,123,.2),.5)
rgba(33, 45, 123, 0.5)
>> rgba(hsl(33,7%,21%),.5)
rgba(57, 54, 50, 0.5)
>> rgba(hsla(33,7%,21%,.9),.5)
rgba(57, 54, 50, 0.5)
Opacity 函數-opacify(),fade-in()函數
這兩個函數是用來對已有顏色的透明度做一個加法運算，會讓顏色
更加不透明。其接受兩個參數，第一個參數是原始顏色，第二個參
數是你需要增加的透明度值，其取值範圍主要是在 0~1 之間。當
透明度值增加到大於 1 時，會以 1 計算，表示顏色不具有任何透明度。
>>opacify(rgba(22,34,235,.6),.2)
rgba(22,34,235,0.8)
>>opacify(rgba(22,34,235,.6),.5)
#1622eb
>>opacify(hsla(22,34,235,.6),.15)
rgba(79,53,39,0.75)
>>opacify(hsla(22,34%,23%,.6),.415)
#4f3527
>>opacify(red,.15)
#89adde
>>fade-in(rgba(23,34,34,.5),.15)
rgba(23,34,34,0.65)
>>fade-in(rgba(23,34,34,.5),.615)
#172222
Opacity 函數-transparentize(), fade-out() 函數
transparentize() 和 fade-out() 函數所起作用剛好與 opacify() 和 fade-in()
函數相反，讓顏色更加的透明。這兩個函數會讓透明值做減法
運算，當計算出來的結果小於 0 時會以 0 計算，表示全透明。
>>transparentize(red,.5)
rgba(255,0,0,0.5)
>>transparentize(#fde,.9)
rgba(255,221,238,0.1)
>>transparentize(rgba(98,233,124,.3),.11)
rgba(98, 233, 124, 0.19)
>> transparentize(rgba(98,233,124,.3),.51)
rgba(98, 233, 124, 0)
>> fade-out(red,.9)
rgba(255, 0, 0, 0.1)
>> fade-out(hsla(98,6%,23%,.5),.1)
rgba(58, 62, 55, 0.4)
>> fade-out(hsla(98,6%,23%,.5),.6)
rgba(58, 62, 55, 0)
