什么是CSS預(yù)處理器
CSS 預(yù)處理器定義了一種新的語言娶桦，其基本思想是掂恕，用一種專門的編程語言限煞，為 CSS 增加了一些編程的特性庇绽，將 CSS 作為目標生成文件锡搜，然后開發(fā)者就只要使用這種語言進行編碼工作
通俗講，CSS 預(yù)處理器用一種專門的編程語言瞧掺，進行 Web 頁面樣式設(shè)計耕餐，然后再編譯成正常的 CSS 文件，以供項目使用辟狈。CSS 預(yù)處理器為 CSS 增加一些編程的特性肠缔，無需考慮瀏覽器的兼容性問題
CSS預(yù)處理器種類繁多，最優(yōu)秀的有 Sass哼转、Less明未、Stylus
什么是Sass
Sass 是一門高于 CSS 的元語言，它能用來清晰地壹蔓、結(jié)構(gòu)化地描述文件樣式趟妥，有著比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔庶溶、更優(yōu)雅的語法煮纵，同時提供多種功能來創(chuàng)建可維護和管理的樣式表
Sass 是采用?Ruby?語言編寫的一款 CSS 預(yù)處理語言
Sass 和 SCSS 有什么區(qū)別
Sass 和 SCSS 其實是同一種東西懂鸵，我們平時都稱之為 Sass
不同之處有：
1. 文件擴展名不同，Sass 是以“.sass”后綴為擴展名行疏，而 SCSS 是以“.scss”后綴為擴展名
2. 語法書寫方式不同匆光，Sass 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)酿联，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似终息。
在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的
SCSS 和 CSS 寫法無差別贞让，這也是 Sass 后來越來越受大眾喜歡原因之一
Sass安裝（windows）
1.?在 Windows 平臺下安裝 Ruby 需要先有 Ruby 安裝包, Ruby 的官網(wǎng)（http://rubyinstaller.org/downloads）
2.?打開Ruby的命令終端? ?gem install sass
3.?查測 Sass 及更新?
? ??sass -v
? ??gem update sass
4. 卸載??gem uninstall sass
Sass 的編譯方法
一.命令編譯
? ? 1> 單文件編譯
? ??sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css? ? ?
? ? 2> 多文件編譯
? ??sass sass/:css/? ? ? #將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件周崭，并且將這些 CSS 文件都放在項目中“css”文件夾中
? ?3> 改善：開啟“watch”功能，這樣只要你的代碼進行任保修改喳张，都能自動監(jiān)測到代碼的變化续镇，并且給你直接編譯出來
? ??sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
二. GUI工具編譯
? ? 1> 較為流行的主要有：
????Koala (http://koala-app.com/)
????Compass.app（http://compass.kkbox.com/）
????Scout（http://mhs.github.io/scout-app/）
????CodeKit（https://incident57.com/codekit/index.html）
????Prepros（https://prepros.io/）
? ? 2>推薦使用
? ??Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
????CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
三. 自動化編譯
? ? 1.?Grunt?
? ??Grunt-beginner前端自動化工具 【http://www.imooc.com/learn/30】
? ? 2.?Gulp? ??
四.?常見的編譯錯誤
? ? 1.?字符編譯
? ??最為常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中销部，是不是支持“GBK”編碼的摸航。所以在創(chuàng)建 Sass 文件時，就需要將文件編碼設(shè)置為“utf-8”
????2.??中文字符
? ??路徑中的中文字符引起的舅桩。建議在項目中文件命名或者文件目錄命名不要使用中文字符
Sass 輸出樣式風格
一. 嵌套輸出方式 nested
? ??在編譯的時候帶上參數(shù)“?--style nested”:? ? sass --watch test.scss:test.css--style nested
二. 展開輸出方式 expanded
? ??sass --watch test.scss:test.css--style expanded
三. 緊湊輸出方式 compact
? ??
? ? ? sass --watch test.scss:test.css--style compact
四. 壓縮輸出方式 compressed
? ??sass --watch test.scss:test.css--style compact
Sass 基礎(chǔ)
一.聲明變量
例如：$btn-primary-color : #fff !default;? #后面加上!default則表示默認值
普通變量:定義之后可以在全局范圍內(nèi)使用
?$fontSize: 12px;
body{? ? font-size:$fontSize;}
默認變量:在值后面加上 !default?
$baseLineHeight:1.5!default;
body{ line-height: $baseLineHeight; }
全局變量：在選擇器酱虎、函數(shù)、混合宏...的外面定義的變量為全局變量
sass?在線編輯器網(wǎng)：http://sassmeister.com/
二.?Sass 的嵌套
1> 選擇器嵌套
2>?屬性嵌套
3>?偽類嵌套
偽類嵌套和屬性嵌套非常類似擂涛，只不過他需要借助`&`符號一起配合使用
三.?混合宏
當你的樣式變得越來越復雜读串，需要重復使用大段的樣式時,Sass 中的混合宏就會變得非常有用
1> 聲明宏
使用“@mixin”來聲明一個混合宏
1）不帶參數(shù)混合宏
例如： @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}
@mixin?是用來聲明混合宏的關(guān)鍵詞?
border-radius?是混合宏的名稱， 大括號里面是復用的樣式代碼
2）帶參數(shù)混合宏
@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius;}
3）復雜的混合宏
box-shadow 的混合宏撒妈，帶有多個參數(shù)恢暖，這個時候可以使用“?…?”來替代
當 $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時，表示有多個陰影值踩身，反之調(diào)用默認的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”
2>?調(diào)用混合宏
使用 "@include" 調(diào)用聲明好的混合宏
3>?混合宏的不足
優(yōu)點：復用重復代碼塊
缺點：會生成冗余的代碼塊 胀茵，不能智能的將相同的樣式代碼塊合并在一起
四. 擴展、繼承
通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊挟阻，從而實現(xiàn)代碼的繼承
缺點：不能傳變量參數(shù)
優(yōu)點：使用繼承后附鸽，編譯出來的 CSS 會將使用繼承的代碼塊合并到一起脱拼，通過組合選擇器的方式向大家展現(xiàn)逝嚎，編譯出來的代碼比混合宏要干凈的多
五.?占位符 %placeholder
Sass 中的占位符?%placeholder 功能是一個很強大歇万，很實用的一個功能缰儿，可以取代以前 CSS 中的基類造成的代碼冗余的情形茧痒，因為 %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話魄衅，不會產(chǎn)生任何代碼
六.?什么時候用混合宏悯周，什么時候用繼承搔确，什么時候使用占位符？
1.?如果代碼塊中涉及到變量娃惯，建議使用混合宏來創(chuàng)建相同的代碼塊
2.?如果代碼塊不需要專任何變量參數(shù)跷乐，而且有一個基類已在文件中存在，那么建議使用 Sass 的繼承
3.?占位符編譯出來的 CSS 代碼和使用繼承基本上是相同趾浅，只是不會在代碼中生成占位符 mt 的選擇器愕提。
占位符和繼承的主要區(qū)別：
????“占位符是獨立定義，不調(diào)用的時候是不會在 CSS 中產(chǎn)生任何代碼皿哨；
????繼承是首先有一個基類存在浅侨，不管調(diào)用與不調(diào)用，基類的樣式都將會出現(xiàn)在編譯出來的 CSS 代碼中
七. 插值 #{}
使用 CSS 預(yù)處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結(jié)構(gòu)體系
編寫更干凈的证膨、高效的和面向?qū)ο蟮?CSS 就需要 Sass 中的插值(Interpolation)
注釋：
? ??1如输、類似 CSS 的注釋方式，使用 ”/* ”開頭椎例，結(jié)屬使用 ”*/ ”
????2挨决、類似 JavaScript 的注釋方式，使用“//”
區(qū)別：?前者會在編譯出來的 CSS 顯示订歪，后者在編譯出來的 CSS 中不會顯示
八. [Sass]數(shù)據(jù)類型
1.?數(shù)字: 如，1肆捕、?2刷晋、?13、?10px慎陵；
2. 字符串：有引號字符串或無引號字符串眼虱，如，"foo"席纽、?'bar'捏悬、?baz；
? ??有引號字符串 (quoted strings)润梯，如?"Lucida Grande"?过牙、'http://sass-lang.com'
????無引號字符串 (unquoted strings)，如?sans-serifbold
? ? 注意：當 deprecated = property syntax 時寇钉，所有的字符串都將被編譯為無引號字符串，不論是否使用了引號
3. 顏色：如舶赔，blue扫倡、?#04a3f9、?rgba(255,0,0,0.5)竟纳；
4. 布爾型：如撵溃，true疚鲤、?false；
5. 空值：如缘挑，null石咬；
6. 值列表：用空格或者逗號分開，如卖哎，margin:10px 15px 0 0鬼悠；
? ??值列表功能：
? ? 1.nth函數(shù)（nth function） 可以直接訪問值列表中的某一項；
? ? 2.join函數(shù)（join function） 可以將多個值列表連結(jié)在一起亏娜；
? ? 3.append函數(shù)（append function） 可以在值列表中添加值焕窝；
? ? 4.@each規(guī)則（@each rule） 則能夠給值列表中的每個項目添加樣式
Sass運算
一、加法维贺、減法它掂、乘法、除法
Sass的控制命令
一溯泣、@if
?@if 可以配合 @else if 和 @else 一起使用
二虐秋、for循環(huán)
@for 循環(huán)中有兩種方式：
????@for $i from <start>?through <end>? ? ?關(guān)鍵字 through 表示包括?end 這個數(shù)
????@for $i from <start>?to <end>? ? ?關(guān)鍵字to 不包括?end 這個數(shù)
三、@while循環(huán)
四垃沦、@each
@each 循環(huán)就是去遍歷一個列表客给，然后從列表中取出對應(yīng)的值
@each $var in <list>
Sass的函數(shù)
一、字符串函數(shù)
? ??字符串函數(shù)是用來處理字符串的函數(shù)
? ? 1>?unquote肢簿、quote
? ? ? ?unquote($string)：刪除字符串中的引號靶剑；
? ? ? ?quote($string)：給字符串添加引號；
????使用 quote() 函數(shù)只能給字符串增加雙引號池充，而且字符串中間有單引號或者空格時桩引，需要用單引號或雙引號括起，否則編譯報錯
? ? 使用 quote() 碰到特殊符號收夸，比如：?!坑匠、?、>?等卧惜，除中折號?-?和?下劃線_?都需要使用雙引號括起厘灼，否則編譯報錯
? ? 2>?To-upper-case()、To-lower-case()
? ? to-upper-case() 函數(shù) 將字符串小寫字母轉(zhuǎn)換成大寫字母
? ??To-lower-case() 函數(shù) 將字符串轉(zhuǎn)換成小寫字母
二序苏、數(shù)字函數(shù)
數(shù)字函數(shù)提要針對數(shù)字方面提供一系列的函數(shù)功能
? ? 1>?percentage($value)：將一個不帶單位的數(shù)轉(zhuǎn)換成百分比值手幢；
? ? 2>?round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個最接近的整數(shù)忱详；
? ? 3>?ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)围来；
? ? 4>?floor($value)：將一個數(shù)去除他的小數(shù)部分；
? ? 5>?abs($value)：返回一個數(shù)的絕對值；
? ? 6>?min($numbers…)：找出幾個數(shù)值之間的最小值监透；
? ? 7>?max($numbers…)：找出幾個數(shù)值之間的最大值桶错；
? ? 8>?random(): 獲取隨機數(shù)
三、列表函數(shù)
? ??在 Sass 中胀蛮，第一個值就是1院刁，第二個值就是 2
?????length($list)：返回一個列表的長度值；
?????nth($list, $n)：返回一個列表中指定的某個標簽值? ?$n>0
? ???join($list1, $list2, [$separator])：將兩個列給連接在一起粪狼，變成一個列表退腥；
?????append($list1, $val, [$separator])：將某個值放在列表的最后；
?????zip($lists…)：將幾個列表結(jié)合成一個多維的列表再榄；
?????index($list, $value)：返回一個值在列表中的位置值? ?沒有找到返回false
四狡刘、顏色函數(shù)
? ? 1> RGB()顏色函數(shù)??提供六種函數(shù)
????rgb($red,$green,$blue)：根據(jù)紅、綠困鸥、藍三個值創(chuàng)建一個顏色嗅蔬；
????rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠疾就、藍和透明度值創(chuàng)建一個顏色澜术；
????red($color)：從一個顏色中獲取其中紅色值；
????green($color)：從一個顏色中獲取其中綠色值猬腰；
????blue($color)：從一個顏色中獲取其中藍色值鸟废；
????mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起
? ? 2>?HSL函數(shù)
? ??hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色漆诽；
? ??hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）侮攀、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色厢拭；
? ??hue($color)：從一個顏色中獲取色相（hue）值；
? ??saturation($color)：從一個顏色中獲取飽和度（saturation）值撇叁；
? ??lightness($color)：從一個顏色中獲取亮度（lightness）值供鸠；
? ??adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創(chuàng)建一個新的顏色陨闹；
? ??lighten($color,$amount)：通過改變顏色的亮度值楞捂，讓顏色變亮，創(chuàng)建一個新的顏色趋厉；
? ??darken($color,$amount)：通過改變顏色的亮度值寨闹，讓顏色變暗，創(chuàng)建一個新的顏色君账；
? ??saturate($color,$amount)：通過改變顏色的飽和度值繁堡，讓顏色更飽和，從而創(chuàng)建一個新的顏色
? ??desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和椭蹄，從而創(chuàng)建出一個新的顏色闻牡；
? ??grayscale($color)：將一個顏色變成灰色，相當于desaturate($color,100%);
? ??complement($color)：返回一個補充色绳矩，相當于adjust-hue($color,180deg);
? ??invert($color)：反回一個反相色罩润，紅、綠翼馆、藍色值倒過來割以，而透明度不變;
? ? 3>?Opacity函數(shù)
? ???alpha($color) /opacity($color)：獲取顏色透明度值；
? ? ?rgba($color, $alpha)：改變顏色的透明度值应媚；
?????opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明严沥；
?????transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明
五、Introspection 函數(shù)
? ??type-of($value)：返回一個值的類型? ?返回值?number 珍特、string 祝峻、bool 、color
????unit($number)：返回一個值的單位
????unitless($number)：判斷一個值是否帶有單位? 不帶單位返回 true 否則返回false：
????comparable($number-1, $number-2)：判斷兩個值是否可以做加扎筒、減和合并? 如果可以返回 true莱找，否則返回false
六、三元函數(shù)
Miscellaneous??三元條件函數(shù)??
if($condition,$if-true,$if-false)
?$condition 條件成立時嗜桌，返回的值為 $if-true奥溺，否則返回的是 $if-false 值
七、Map
Sass 的 map 常常被稱為數(shù)據(jù)地圖
$map: (
? ? key1: value1,
? ? key2: (
? ? ? ? key-1: value-1,
? ? ? ? key-2: value-2
? ? )
);
?map 自帶函數(shù)：
map-get($map,$key)：根據(jù)給定的 key 值骨宠，返回 map 中相關(guān)的值浮定。
map-merge($map1,$map2)：將兩個 map 合并成一個新的 map。
map-remove($map,$key)：從 map 中刪除一個 key层亿，返回一個新 map桦卒。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value匿又。
map-has-key($map,$key)：根據(jù)給定的 key 值判斷 map 是否有對應(yīng)的 value 值方灾，如果有返回 true，否則返回 false碌更。
keywords($args)：返回一個函數(shù)的參數(shù)裕偿，這個參數(shù)可以動態(tài)的設(shè)置 key 和 value
Sass 的 @ 規(guī)則
一、@import
@import? 能夠引入 SCSS 和 Sass 文件
@import 根據(jù)文件名引入
????@import "foo";
????@import "rounded-corners", "text-shadow"; //引入多個文件
????一個文件叫 colors.scss ,@import "_colors" ,不會生成 colors.css
????一個文件叫 _colors.scss ,@import "colors" ,不會生成 _colors.css
注意痛单，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件嘿棘。 例如 _colors.scss與?colors.scss 不能并存
二、@media??冒泡
三鸟妙、@extend??擴展選擇器或占位符
四焦人、@at-root??跳出根元素
五圆仔、@debug 垃瞧、@warn?? 調(diào)試Sass
六、@error
