sass和scss的區別 sass是以嚴格的縮進式語法規則來書寫，不帶大括弧({})和分號(;)，scss和css寫法比較相似 Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置為“utf-8 sass覆蓋預設變數值是在他之前重新聲明變數值（！de ...
sass和scss的區別
sass是以嚴格的縮進式語法規則來書寫，不帶大括弧({})和分號(;)，scss和css寫法比較相似
Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置為“utf-8
sass覆蓋預設變數值是在他之前重新聲明變數值（！default）
混合巨集：@mixin font（當需要使用變數的時候用）
@include font
Sass 在調用相同的混合巨集時，並不能智能的將相同的樣式代碼塊合併在一起。這也是 Sass 的混合巨集最不足之處。
繼承和擴展：@extend .class；（不需要使用變數的時候用，但是聲明出來的基類，不管有沒有被調用，都會出現在css裡面）
@extend 調用的占位符，編譯出來的代碼會將相同的代碼合併在一起
占位符：%（不需要使用變數的時候用，但是聲明出來的基類，沒有被調用，都不會出現在css裡面）
%placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼
插值：#{}
@each...in...語句
進行運算的時候，帶單位的話，單位要相同。但是進行乘法運算的時候，帶單位的話，兩個單位相同的話，會出現錯誤，只要其中一個帶值就可以了。進行除法運算的時候，“/”符號，如果有其他的運算符的話就會生效，如果沒有的話，要記得帶括弧，不然不會生效，另外，在 Sass 除法運算中，當用變數進行除法運算時，“/”符號也會自動被識別成除法。但在除法運算時，如果兩個值帶有相同的單位值時，除法運算之後會得到一個不帶單位的數值
值列表
(1) nth函數（nth function） 可以直接訪問值列表中的某一項；
(2) join函數（join function） 可以將多個值列表連結在一起；
(3) append函數（append function） 可以在值列表中添加值；
(4) @each規則（@each rule） 則能夠給值列表中的每個項目添加樣式。
@for迴圈
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示變數
start 表示起始值
end 表示結束值
這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。
@while
直到遇到false才會停止迴圈
@while $types > 0 {
.while-#{$types} {
width : $type-width + $types;
}
$types : $types - 1; // 自減
}
@each迴圈
@each $var in <list>
函數功能
(1) 字元串函數
(2) 數字函數
(3) 列表函數
(4) 顏色函數
(5) Introspection 函數
(6) 三元函數等
(1) 字元串函數：用來處理字元串的函數
unquote($string)：刪除字元串中的引號；只能刪除字元串最前和最後的引號（雙引號或單引號）
quote($string)：給字元串添加引號。
To-upper-case() 函數將字元串小寫字母轉換成大寫字母
To-lower-case() 函數將字元串轉換成小寫字母
(2) 數字函數
percentage($value)：將一個不帶單位的數轉換成百分比值；
round($value)：將數值四捨五入，轉換成一個最接近的整數；
ceil($value)：將大於自己的小數轉換成下一位整數；
floor($value)：將一個數去除他的小數部分；
abs($value)：返回一個數的絕對值；
min($numbers…)：找出幾個數值之間的最小值；
max($numbers…)：找出幾個數值之間的最大值；
random(): 獲取隨機數
列表函數
(1) length($list)：返回一個列表的長度值；
(2) nth($list, $n)：返回一個列表中指定的某個標簽值（$n必須是大於 0 的整數）
(3) join($list1, $list2, [$separator])
將兩個列給連接在一起，變成一個列表，多於2個會出錯，但很多時候不只碰到兩個列表連接成一個列表，這個時候就需要將多個 join() 函數合併在一起使用。參數 $separator，這個參數主要是用來給列表函數連接列表值是，使用的分隔符號，預設值為 auto， 除了預設值 auto 之外，還有 comma 和 space 兩個值，其中 comma 值指定列表中的列表項值之間使用逗號（,）分隔，space 值指定列表中的列表項值之間使用空格（ ）分隔。
(1) 第一個列表中只有一個列表項，那麼 join() 函數合併的列表項目中每個列表項目這間使用的分隔符號會根據第二個列表項中使用的
(2) 如果列表中的第一個列表中每個值之間使用的是空格
(3) 如果當兩個列表中的列表項小於1時，將會以空格分隔
(4) append($list1, $val, [$separator])：將某個值放在列表的最後；
1) 如果列表只有一個列表項時，那麼插入進來的值將和原來的值會以空格的方式分隔。
2) 如果列表中列表項是以空格分隔列表項，那麼插入進來的列表項也將以空格分隔；
3) 如果列表中列表項是以逗號分隔列表項，那麼插入進來的列表項也將以逗號分隔。
4) 當然，在 append() 函數中，可以顯示的設置 $separator 參數，
如果取值為 comma 將會以逗號分隔列表項
如果取值為 space 將會以空格分隔列表項
(5) zip($lists…)：將幾個列表結合成一個多維的列表；
1) 在使用zip()函數時，每個單一的列表個數值必須是相同的，同類型
2) zip(1px 2px 3px,solid dashed dotted,green blue red)生成
1px solid green, 2px dashed blue, 3px dotted red
(6) index($list, $value)：返回一個值在列表中的位置值。index(1px solid red, red)
Introspection函數
(1) type-of($value)：返回一個值的類型
- number 為數值型。 （帶單位和沒帶單位都可以）
- string 為字元串型。
- bool 為布爾型。
- color 為顏色型
(2) unit($number)：返回一個值的單位，如果有運算的時候，加減要同單位，乘除可以多單位
(3) unitless($number)：判斷一個值是否帶有單位,返回boolean值
(4) comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合併,返回boolean值。同單位或者一個不帶單位的才可以，或者單位同類型
Miscellaneous函數（三元）
if($condition,$if-true,$if-false) // $condition是boolean值
Map（數據地圖/json 以 key:value 成對的出現）
用個 $ 加上命名空間來聲明 map。後面緊接是一個小括弧 ()，將數據以 key:value 的形式賦予，其中 key 和 value 是成對出現，並且每對之間使用逗號 (,) 分隔，其中最後一組後面沒有逗號。
map可以相互嵌套
$theme-color: (
default: (
bgcolor: #fff,
text-color: #444,
link-color: #39f
),
primary:(
bgcolor: #000,
text-color:#fff,
link-color: #93f
),
negative: (
bgcolor: #f36,
text-color: #fefefe,
link-color: #d4e
)
);
Sass Maps的函數
(1) map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。
根據 $key 參數，返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map中，將返回 null 值
(2) map-merge($map1,$map2)：將兩個 map 合併成一個新的 map。
(3) map-remove($map,$key)：從 map 中刪除一個 key，返回一個新 map。
(4) map-keys($map)：返回 map 中所有的 key。
(5) map-values($map)：返回 map 中所有的 value。
(6) map-has-key($map,$key)：根據給定的 key 值判斷 map 是否有對應的 value 值，如果有返回 true，否則返回 false。
(7) keywords($args)：返回一個函數的參數，這個參數可以動態的設置 key 和 value。
@mixin map($args...){
@debug keywords($args);
}
@include map(
$dribble: #ea4c89,
$facebook: #3b5998,
$github: #171515,
$google: #db4437,
$twitter: #55acee
);
RGB顏色函數
開啟 Sass 的函數計算：sass -i
(1) rgb($red,$green,$blue)：根據紅、綠、藍三個值創建一個顏色；
(2) rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值創建一個顏色；
(3) rgba($red,$green,$blue,$alpha) //將一個rgba顏色轉譯出來，和未轉譯的值一樣
(4) rgba($color,$alpha) //將一個Hex顏色轉換成rgba顏色
(5) red($color)：從一個顏色中獲取其中紅色值；
(6) green($color)：從一個顏色中獲取其中綠色值；
(7) blue($color)：從一個顏色中獲取其中藍色值；
(8) mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。
$weight 為 合併的比例（選擇權重），預設值為 50%，其取值範圍是 0~1 之間。它是每個 RGB 的百分比來衡量，當然透明度也會有一定的權重。預設的比例是 50%，這意味著兩個顏色各占一半，如果指定的比例是 25%，這意味著第一個顏色所占比例為 25%，第二個顏色所占比例為75%。
HSL函數
(1) hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色；
(2) hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色；
(3) hue($color)：從一個顏色中獲取色相（hue）值；
(4) saturation($color)：從一個顏色中獲取飽和度（saturation）值；
(5) lightness($color)：從一個顏色中獲取亮度（lightness）值；
(6) adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色；
第二個值可以是度數，也可以是百分比
(7) lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色；
(8) darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色；
(9) saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色
(10) desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色；
(11) grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);
(12) complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);
(13) invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。
Opacity函數
(1) alpha($color) / opacity($color)：獲取顏色透明度值；
(2) rgba($color, $alpha)：改變顏色的透明度值；
(3) opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
接受兩個參數，第一個參數是原始顏色，第二個參數是你需要增加的透明度值，其取值範圍主要是在 0~1 之間。當透明度值增加到大於 1 時，會以 1 計算，表示顏色不具有任何透明度。
(4) transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。
讓透明值做減法運算，當計算出來的結果小於 0 時會以 0 計算，表示全透明
@media
(1) 如果在樣式中使用 @media 指令，它將冒泡到外面
@at-root 跳出根元素
不會嵌套，樣式獨立
@debug 調試
@warn
@error
