• CSS預(yù)處理器就是用某一種語言來為CSS增加一些動態(tài)語言的特性(變量,函數(shù),繼承等)
• CSS預(yù)處理器可以讓你的CSS更加簡潔,適應(yīng)性更強,代碼更直觀等諸多好處
• 簡而言之:CSS預(yù)處理器就是升級版CSS
• 常見的CSS預(yù)處理器:Less,Sass,Stylus

Less

• Less是一門CSS預(yù)處理語言,為CSS賦予了動態(tài)語言的特征
• 它擴展了CSS語言,增加了變量,Mixin(混合),嵌套,函數(shù)和運算等特性,使CSS更容易維護(hù)和擴展
• 用類似JS的語法去寫CSS
• 為什么需要less
  • CSS語法雖然簡單,但它同時也帶來一些問題
  • CSS需要書寫大量看似沒有邏輯的代碼,不方便維護(hù)及擴展,也不利于復(fù)用
  • 造成這些原因的本質(zhì)源于CSS是一門非程序式的語言,沒有變量/函數(shù)/作用域等概念
• less基本使用
  • 在瀏覽器直接運行
    • 編寫less文件-->引入less.js-->運行
    • 一定要先引入less.css在引入less.js
    • 如果less代碼是寫到單獨的文件中,一定要在服務(wù)器環(huán)境運行才能生效
  • 提前預(yù)編譯
    • 編寫less文件-->利用工具轉(zhuǎn)換為css文件-->引入css文件
    • 無需引入less.js文件,無需在服務(wù)端運行

less中的注釋

• 在less中既有單行注釋也有多行注釋
• less中的單行注釋不會參與預(yù)處理,預(yù)處理的時候不會把單行注釋編譯到處理后的文件中

less中的變量

• 和js中的變量概念基本一樣
  • less定義變量的格式:@變量名稱:值;
  • less中使用變量的格式:@變量名稱;
  • 和js一樣可以將一個變量賦值給另一個變量,@變量名稱:@變量名稱;
• 和js一樣less中的變量也有全局變量和局部變量
  • 定義在{}外面的就是全局變量,什么地方都可以使用
  • 定義在{}里面的就是局部變量,只能在{}中使用
• less中的變量是延遲加載的,寫到后面也能在前面使用
• 和js一樣不同作用域的變量不會相互影響,只有相同作用域的變量才會相互影響
• 和js一樣在訪問變量時會采用就近原則
• 在less中屬性的取值可以直接使用變量,但是如果是屬性名稱或者選擇器名稱并不能直接使用變量,如果屬性名稱或者選擇器名稱想使用變量中保存的值,呢么必須使用變量插值的格式:@{變量名稱}

less中的運算

• less中的運算和CSS3中新增的calc函數(shù)一樣,都支持+ - * /運算
• 兩個數(shù)至少有一個需要帶單位

less中的混合

• 將需要重復(fù)使用的代碼封裝到一個類中,在需要使用的地方調(diào)用封裝好的類即可
• 在預(yù)處理的時候less會自動將用到的封裝好的類中的代碼拷貝過來
• 如果混合名稱的后面沒有(),那么在預(yù)處理的時候,會保留混合的代碼
• 如果混合名稱的后面加上(),那么在預(yù)處理的時候,不會保留混合的代碼
• less中的@arguments和js中的arguments一樣,可以拿到傳遞進(jìn)來的所有形參
• less中的...表示可以接收0個或多個參數(shù),如果形參列表中使用了...,那么...必須寫在形參列表最后
• less中混合的匹配模式
  • 匹配模式就是在形參列表最前面隨便加一個字符串,將來想調(diào)用哪一個混合就傳遞哪一個對應(yīng)的字符串
  • @_:表示通用的匹配模式
  • 無論同名的哪一個混合被匹配了,都會先執(zhí)行通用匹配模式中的代碼

less中的內(nèi)置函數(shù)

• 由于less的底層就是用JavaScript實現(xiàn)的,所以JavaScript中常用的一些函數(shù)在less中都支持

less中的層級結(jié)構(gòu)

• 如果在某一個選擇器的{}中直接寫上了其他的選擇器,會自動轉(zhuǎn)換成后代選擇器
• &的作用,是告訴less在轉(zhuǎn)換的時候不要用后代來轉(zhuǎn)換,直接拼接在當(dāng)前選擇器的后面即可
• less中的繼承和混合的區(qū)別
  • 使用時的語法格式不同
  • 轉(zhuǎn)換之后的結(jié)果不同(混合是直接拷貝,繼承是并集選擇器)

less中的條件判斷

• less中可以通過when給混合添加執(zhí)行限定條件,只有條件滿足(為真)才會執(zhí)行混合中的代碼
• when表達(dá)式中可以使用標(biāo)記運算符(> < >= <= =),邏輯運算符,或者檢查函數(shù)來進(jìn)行條件判斷
  • (),()相當(dāng)于JS中的||
  • ()and()相當(dāng)于JS中的&&

SASS

• SASS是一套利用Ruby實現(xiàn)的,最早最成熟的CSS預(yù)處理器,誕生于2007年
• 它擴展了CSS語言,增加了變量,Mixin(混合),嵌套,函數(shù)和運算等特性,使CSS更易維護(hù)和擴展
• 如何學(xué)習(xí)SASS
  • 由于LESS的誕生比SASS要晚,并且LESS受到了SASS的影響,所以在LESS中能看到大量SASS中的特性
  • 所以只要學(xué)會了LESS就等同于學(xué)會了大部分的SASS
• LESS和SASS文件后綴名區(qū)別
  • LESS以.less結(jié)尾
  • SASS以.sass或者.scss結(jié)尾
    • .sass結(jié)尾以縮進(jìn)代替{}表示層級結(jié)構(gòu),語句后面不用編寫分號
    • .scss以{}表示層級結(jié)構(gòu),語句后面需要寫分號
    • 企業(yè)開發(fā)中推薦使用.scss結(jié)尾

SASS中的注釋

• SASS中的注釋和LESS中的注釋一樣
• 單行注釋不會被編譯(不會出現(xiàn)在編譯后的文件中)
• 多行注釋會被編譯(會出現(xiàn)在編譯后的文件中)

SASS中的變量

• SASS中的變量和LESS中一樣,只是定義格式不同
  • LESS中定義變量 @變量名稱:值;
  • SASS中定義變量 $變量名稱:值;
• SASS中變量特點
  • SASS中變量特點和LESS中幾乎一樣
  • 后定義覆蓋先定義
  • 可以把變量賦值給其他變量
  • 區(qū)分全局變量和局部變量(訪問采用就近原則)
• SASS中變量不是延遲加載,不可以先使用后定義
• SASS中的變量插值
  • SASS中的變量插值和LESS中也一樣,只不過格式不一樣
  • LESS變量插值格式:@{變量名稱}
  • SASS變量插值格式:#{$變量名稱}
  • SASS中的運算與LESS也一樣

SASS中的混合

• SASS中的混合和LESS中也一樣,只是定義格式和調(diào)用的格式不同
  • LESS中混合定義:.混合名稱{} 或者.混合名稱(){}
  • LESS中混合調(diào)用:.混合名稱; 或者.混合名稱();
  • SASS中混合定義:@mixin 混合名稱{}; 或者@mixin 混合名稱(){};
  • SASS中混合調(diào)用:@include 混合名稱; 或者@include 混合名稱();
• SASS中帶參數(shù)混合和LESS中也一樣
• SASS中的可變參數(shù)
  • SASS中的可變參數(shù)和LESS中也一樣
  • 只不過由于SASS不是使用JS實現(xiàn)的,所以不能直接在混合中使用arguments
  • 必須通過args來使用
  • 和LES一樣可變參數(shù)必須卸載形參列表的最后
• .scss文件中導(dǎo)入其他的.scss文件
  • 和LESS一樣SASS文件中也支持導(dǎo)入其他SASS文件
  • 其實原生的CSS也支持通過@import導(dǎo)入其他的CSS文件,只不過不常用
  • 不常用的原因在于原生的@import導(dǎo)入其他的CSS文件,只有執(zhí)行到@import時瀏覽器才會去下載對應(yīng)css文件,這導(dǎo)致請求次數(shù)變多,頁面加載起來特別慢
  • LESS和SASS中的@import是直接將導(dǎo)入的文件拷貝到當(dāng)前文件中生成一份CSS,所以只會請求一次,速度更快

SASS中的內(nèi)置函數(shù)

• 和LESS一樣,SASS中也提供了很多內(nèi)置函數(shù)方便我們使用
• 同時支持自定義函數(shù)
• 可以在SASS官方文檔查看(http://www.sass.hk)

SASS中的層級結(jié)構(gòu)

• 和LESS一樣支持嵌套,默認(rèn)情況下嵌套的結(jié)構(gòu)會轉(zhuǎn)化成后代選擇器
• 和LESS一樣也支持通過&符號不轉(zhuǎn)換成后代選擇器

SASS中的繼承

• 和LESS中的繼承一樣,都是通過并集選擇器來實現(xiàn)的,只不過格式不一樣
• 混合和繼承區(qū)別
  • 混合是直接拷貝,有多少個地方用到就會拷貝多少份
  • 繼承是通過并集選擇器,不會拷貝只會保留一份

SASS中的條件判斷

• 和LESS一樣SASS中也支持條件判斷,只不過SASS中的條件判斷支持得更為徹底
• SASS中支持if/else if/else,SASS中當(dāng)條件不為false或者null時就會執(zhí)行{}中的代碼

SASS中的循環(huán)

• SASS中直接支持循環(huán)語句,而LESS中需要通過混合+條件判斷自己實現(xiàn)
• SASS中支持兩種循環(huán),分別是for循環(huán)和while循環(huán)
  • for循環(huán)
  • @for $i form 起始整數(shù) through 結(jié)束整數(shù){}
  • @for $i form 起始整數(shù) to 結(jié)束整數(shù){}
  • 兩者的區(qū)別 through包頭包尾,to包頭不包尾
  • while循環(huán)
  • @while(條件語句){}