css預(yù)處理器之sass
1.基礎(chǔ)
1.什么是SASS(Syntactically Awesome Stylesheets Sass)?
? SASS是一套利用Ruby實(shí)現(xiàn)的, 最早最成熟的CSS預(yù)處理器, 誕生于2007年.
? 它擴(kuò)展了 CSS 語(yǔ)言，增加了變量、Mixin(混合)、嵌套、函數(shù)和運(yùn)算等特性，使 CSS 更易維護(hù)和擴(kuò)1
1.2 如何學(xué)習(xí)SASS?
? LESS是一套利用JavaScript實(shí)現(xiàn)的CSS預(yù)處理器, 誕生于2009年.
? 由于LESS的誕生比SASS要晚, 并且LESS受到了Sass的影響, 所以在LESS中能看到大量SASS中的特性.
? 所以只要學(xué)會(huì)了LESS就等同于學(xué)會(huì)了大部分的SASS
1.3 LESS和SASS文件后綴名區(qū)別
LESS以.less結(jié)尾
? SASS以.sass或者.scss結(jié)尾
? 兩種不同結(jié)尾方式區(qū)別: .sass結(jié)尾以縮進(jìn)替代{}表示層級(jí)結(jié)構(gòu), 語(yǔ)句后面不用編寫(xiě)分號(hào)
? .scss以{}表示層級(jí)結(jié)構(gòu), 語(yǔ)句后面需要寫(xiě)分號(hào)
? 企業(yè)開(kāi)發(fā)中推薦使用.scss結(jié)尾
? 注意點(diǎn): 如果需要使用考拉編譯sass文件, 項(xiàng)目目錄結(jié)構(gòu)中(包含文件名)不能出現(xiàn)中文和特殊字符
2.注釋
? SASS中的注釋和LESS一樣
? 單行注釋不會(huì)被編譯(不會(huì)出現(xiàn)在編譯后的文件中)
? 多行注釋會(huì)被編譯 (會(huì)出現(xiàn)在編譯后的文件中)
3.變量
/* 1.SASS中的變量 SASS中的變量和LESS中一樣, 只是定義格式不同 LESS中定義變量 @變量名稱: 值; SASS中定義辦理 $變量名稱: 值; 2.SASS中變量特點(diǎn) SASS中變量特點(diǎn)和LESS中幾乎一樣 2.1后定義覆蓋先定義 2.2可以把變量賦值給其它變量 2.3區(qū)分全局變量和局部變量(訪問(wèn)采用就近原則) 注意點(diǎn): LESS中變量是延遲加載, 可以先使用后定義 SASS中變量不是延遲加載, 不可以先使用后定義 */
4.變量插值
/* 1.什么是變量插值? 如果是屬性的取值可以直接使用變量, 但是如果是屬性名稱或者選擇器名稱并不能直接使用變量, 必須使用變量插值的格式 2.SASS中的變量插值 SASS中的變量插值和LESS中也一樣, 只不過(guò)格式不一樣 LESS變量插值格式: @{變量名稱} SASS變量插值格式: #{$變量名稱} */
5.運(yùn)算
/* 1.SASS中的運(yùn)算? SASS中的運(yùn)算和LESS也一樣, 都支持+ - * / 運(yùn)算 注意點(diǎn): 無(wú)論是LESS中的運(yùn)算還是SASS中的運(yùn)算都需要加上() */
6.混合
/* 1.SASS中的混合 SASS中的混合和LESS中也一樣, 只是定義格式和調(diào)用的格式不同 LESS中混合定義: .混合名稱{} 或者 .混合名稱(){} LESS中混合調(diào)用: .混合名稱; 或者 .混合名稱(); SASS中混合定義: @mixin 混合名稱{}; 或者 @mixin 混合名稱(){}; SASS中混合調(diào)用: @include 混合名稱; 或者 @include 混合名稱(); */
7.帶參數(shù)混合
/* 1.SASS中帶參數(shù)的混合 SASS中帶參數(shù)的混合和LESS中也一樣 1.1不帶默認(rèn)值形參 1.2帶默認(rèn)值形參 1.3給指定參數(shù)賦值 */
8.可變參數(shù)混合
/* 1.SASS中的可變參數(shù) SASS中的可變參數(shù)和LESS中也一樣, 只不過(guò)由于SASS不是使用JS實(shí)現(xiàn)的, 所以不能直接在混合中使用arguments 必須通過(guò) $args...的格式來(lái)定義可變參數(shù), 然后通過(guò)$args來(lái)使用 注意點(diǎn): 和LESS一樣可變參數(shù)必須寫(xiě)在形參列表的最后 */ /* @mixin animate($name, $time, $mode, $delay){ transition: $name $time $mode $delay; } */ /* @mixin animate($args...){ transition: $args; } */ div { width: 200px; height: 200px; background: red; transition: all 4s linear, 0s; }
9.導(dǎo)入其他sass
/* 1..scss文件中導(dǎo)入其它.scss文件 和LESS一樣SASS文件中也支持導(dǎo)入其它SASS文件 其實(shí)原生的CSS也支持通過(guò)@import導(dǎo)入其它的CSS文件, 只不過(guò)不常用 不常用的原因在于原生的@import導(dǎo)入其它的CSS文件, 只有執(zhí)行到@import時(shí)瀏覓器才會(huì)去下載對(duì)應(yīng) css文件，這導(dǎo)致請(qǐng)求次數(shù)變多,頁(yè)面加載起來(lái)特別慢 而LESS和SASS中的@import是直接將導(dǎo)入的文件拷貝到當(dāng)前文件中生成一份CSS, 所以只會(huì)請(qǐng)求一次, 速度更快 */
10.內(nèi)置函數(shù)
/* 1.SASS中的內(nèi)置函數(shù) 和LESS一樣, SASS中也提供了很多內(nèi)置函數(shù)方便我們使用 */ // 字符串函數(shù) /* unquote（$string）：刪除字符串中的引號(hào)； quote（$string）：給字符串添加引號(hào)； To-upper-case（$string）：將字符串小寫(xiě)字母轉(zhuǎn)換為大寫(xiě)字母 To-lower-case（$string）：將字符串大寫(xiě)字母轉(zhuǎn)換為小寫(xiě)字母 */ // 數(shù)值函數(shù) /* percentage($value)：將不帶單位的數(shù)轉(zhuǎn)換成百分比值； round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)； ceil($value)：向上取整； floor($value)：向下取整； abs($value)：取數(shù)的絕對(duì)值； min($numbers…)：找出幾個(gè)數(shù)值之間的最小值； max($numbers…)：找出幾個(gè)數(shù)值之間的最大值； random(): 獲取隨機(jī)數(shù) */ // 顏色函數(shù) /* rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色； rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色； red($color)：從一個(gè)顏色中獲取其中紅色值； green($color)：從一個(gè)顏色中獲取其中綠色值； blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值； mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。 */ // 列表函數(shù) /* length($list)：返回一個(gè)列表的長(zhǎng)度值; nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值; join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起，變成一個(gè)列表； append($list1, $val, [$separator])：將某個(gè)值放在列表的最后； zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表； index($list, $value)：返回一個(gè)值在列表中的位置值。 */
11層級(jí)結(jié)構(gòu)
/* 1.SASS中的層級(jí)結(jié)構(gòu) 和LESS一樣支持嵌套, 默認(rèn)情況下嵌套的結(jié)構(gòu)會(huì)轉(zhuǎn)換成后代選擇器 和LESS一樣也支持通過(guò)&符號(hào)不轉(zhuǎn)換成后代選擇器 */
12.繼承
/* 1.SASS中的繼承 SASS中的繼承和LESS中的繼承一樣, 都是通過(guò)并集選擇器來(lái)實(shí)現(xiàn)的, 只不過(guò)格式不一樣而已 混合和繼承區(qū)別 混合是直接拷貝, 有多少個(gè)地方用到就會(huì)拷貝多少份 繼承是通過(guò)并集選擇器, 不會(huì)拷貝只會(huì)保留一份 */ .center{ //定義一個(gè)類 沒(méi)有圓括號(hào)哦 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .father { @extend .center; width: 300px; height: 300px; background: red; .son { width: 200px; height: 200px; background: blue; } }
13.條件判斷
/* 1.SASS中的條件判斷 和LESS一樣SASS中也支持條件判斷, 只不過(guò)SASS中的條件判斷支持得更為徹底 SASS中支持 @if(條件語(yǔ)句){} @else if(條件語(yǔ)句){} ... ... @else(條件語(yǔ)句){} SASS中當(dāng)條件不為false或者null時(shí)就會(huì)執(zhí)行{}中的代碼 和LESS一樣SASS中的條件語(yǔ)句支持通過(guò)> >= < <= ==進(jìn)行判斷 */ @mixin triangle($dir,$width,$color){ width: 0; height: 0; border-width: $width; border-style: solid solid solid solid; if($dir == Up){ border-color: $color transparent transparent transparent; } }
14.循環(huán)
/* 1.SASS中的循環(huán) SASS比LESS牛逼的地方就在于SASS中直接支持循環(huán)語(yǔ)句, 而LESS中需要通過(guò)混合+條件判斷自己實(shí)現(xiàn) SASS中支持兩種循環(huán), 分別是for循環(huán)和while循環(huán) 2.for循環(huán) @for $i from 起始整數(shù) through 結(jié)束整數(shù){} @for $i from 起始整數(shù) to 結(jié)束整數(shù){} 兩者的區(qū)別 through包頭包尾, to包頭不包尾 3.while循環(huán) @while(條件語(yǔ)句){} */ ul li { width: 100%; height: 50px; border: 1px solid #000; font-size: 20px; color: #fff; background: red; //for @for $i from 5 through 8{ &:nth-child(#{$i}){ background: blue; } } //while $i:5; @while($i<=8){ &:nth-child(#{$i}){ background: blue; } $i:$i+1; } }
