一俱萍、 簡(jiǎn)介
CSS 預(yù)處理器定義了一種新的語(yǔ)言端壳，其基本思想是，用一種專門的編程語(yǔ)言枪蘑，為 CSS 增加了一些編程的特性损谦，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作岳颇。
通俗的說照捡，“CSS 預(yù)處理器用一種專門的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)话侧，然后再編譯成正常的 CSS 文件栗精，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性瞻鹏，無需考慮瀏覽器的兼容性問題”术羔，例如你可以在 CSS 中使用變量、簡(jiǎn)單的邏輯程序乙漓、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語(yǔ)言中的一些基本特性，可以讓你的 CSS 更加簡(jiǎn)潔释移、適應(yīng)性更強(qiáng)叭披、可讀性更佳，更易于代碼的維護(hù)等諸多好處。
Sass涩蜘、Less嚼贡，和Stylus是眾多CSS預(yù)處理器語(yǔ)言中使用最廣泛的。
SASS與SCSS的區(qū)別：Sass 和 SCSS 其實(shí)是同一種東西同诫，我們平時(shí)都稱之為 Sass粤策，兩者之間不同之處有以下兩點(diǎn)：1.文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名误窖，而 SCSS 是以“.scss”后綴為擴(kuò)展名叮盘。2.語(yǔ)法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來書寫霹俺，不帶大括號(hào)({})和分號(hào)(;)柔吼，而 SCSS 的語(yǔ)法書寫和我們的 CSS 語(yǔ)法書寫方式非常類似。
SASS提供四個(gè)[編譯風(fēng)格]的選項(xiàng)：
* nested：嵌套縮進(jìn)的css代碼丙唧，它是默認(rèn)值愈魏。
* expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼想际。
* compact：簡(jiǎn)潔格式的css代碼培漏。
* compressed：壓縮后的css代碼。
二胡本、用法（可與less對(duì)比）
（一）變量
$變量名
普通變量：$變量名:值;
默認(rèn)變量：$變量名:值!default;
變量調(diào)用：$變量名
建議在以下條件使用變量的聲明 1.該值至少重復(fù)出現(xiàn)了兩次牌柄；2.該值至少可能會(huì)被更新一次；3.該值所有的表現(xiàn)都與變量有關(guān)（非巧合）打瘪。
（二）嵌套
sass與less相同友鼻，均可以進(jìn)行選擇器的嵌套，表示層級(jí)關(guān)系
（三）導(dǎo)入
在一個(gè)sass文件中可以導(dǎo)入另一sass文件闺骚，最后編譯為一個(gè)css文件
@import ‘導(dǎo)入文件名’ //導(dǎo)入的sass文件名不帶后綴
（四）混合彩扔、繼承/拓展
單純的將一個(gè)類的屬性應(yīng)用到另一個(gè)類中而無需傳入?yún)?shù)時(shí)，在復(fù)用時(shí)前加@extend
eg： .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
若需要傳入?yún)?shù)僻爽，則在需要傳入的類名前加@mixin 虫碉，在混合使用時(shí)前加@include
@mixin:聲明混合宏
@include:來調(diào)用聲明好的混合宏
eg @mixin box-sizing ($sizing:5px) {//此處5px為默認(rèn)值,也可以傳入多個(gè)參數(shù)
-webkit-box-sizing:$sizing;
-moz-box-sizing:$sizing;
box-sizing:$sizing;
}
.box-border{
border:1px solid #ccc;
@include box-sizing(border-box);
}
（五）運(yùn)算 可編譯時(shí)進(jìn)行簡(jiǎn)單加減乘除運(yùn)算
如：變量與變量，值與值胸梆，顏色與顏色敦捧，字符（串）與字符（串）
（六）顏色
sass中集成了大量的顏色函數(shù)，讓變換顏色更加簡(jiǎn)單碰镜。
eg： color:darken(#08c,10%);
（七）占位符 %placeholder
%placeholder 聲明的代碼兢卵，如果不被 @extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼绪颖。
eg： %mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
編譯后的css：
.btn, .block {
margin-top: 5px;
}
.btn, .block span {
padding-top: 5px;
}
（七）混合宏 VS 繼承 VS 占位符
（八）插值
#{$變量名}當(dāng)你想設(shè)置屬性值的時(shí)候你可以使用字符串插入進(jìn)來
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);
編譯出來的css：
css.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
局限性：1.可能會(huì)刪除用于 Sass 變量的插值秽荤。2.不能在 mixin 中調(diào)用。3.不能在include中調(diào)用（但是可以使用 @extend 中使用插值。）
（九）注釋
同less一樣窃款，可使用“/* */” 和“//”進(jìn)行注釋课兄，區(qū)別在于使用“//”注釋的文字編譯后生成的css文件中不會(huì)顯示注釋部分，而“/* */”得注釋內(nèi)容會(huì)出現(xiàn)在編譯后的css文件中
（十）數(shù)據(jù)類型
Sass 和 JavaScript 語(yǔ)言類似晨继，也具有自己的數(shù)據(jù)類型烟阐，在 Sass 中包含以下幾種數(shù)據(jù)類型：
（1） 數(shù)字: 如，1紊扬、 2蜒茄、 13、 10px珠月；
（2）字符串：有引號(hào)字符串或無引號(hào)字符串扩淀，如，"foo"啤挎、 'bar'驻谆、 baz；
注意：1.使用 #{ }插值語(yǔ)句 (interpolation) 時(shí)庆聘，有引號(hào)字符串將被編譯為無引號(hào)字符串胜臊，這樣方便了在混合指令 (mixin) 中引用選擇器名。
2.當(dāng) deprecated = property syntax 時(shí) （暫時(shí)不理解是怎樣的情況）伙判，所有的字符串都將被編譯為無引號(hào)字符串象对，不論是否使用了引號(hào)
（3）顏色：如，blue宴抚、 #04a3f9勒魔、 rgba(255,0,0,0.5)；
（4）布爾型：如菇曲，true冠绢、 false；
（5）空值：如常潮，null弟胀；
（6）值列表：通過空格或者逗號(hào)分隔的一系列的值，如:margin: 10px 15px 0 0
事實(shí)上獨(dú)立的值也被視為值列表——只包含一個(gè)值的值列表喊式。
Sass列表函數(shù)（Sass list functions）賦予了值列表更多功能：
nth函數(shù)（nth function） 可以直接訪問值列表中的某一項(xiàng)孵户；
join函數(shù)（join function） 可以將多個(gè)值列表連結(jié)在一起；
append函數(shù)（append function） 可以在值列表中添加值岔留；
@each規(guī)則（@each rule） 則能夠給值列表中的每個(gè)項(xiàng)目添加樣式夏哭。
（十一） sass的控制命令
（1）@if
@if 指令是一個(gè) SassScript，它可以根據(jù)條件來處理樣式塊献联，如果條件為 true 返回一個(gè)樣式塊方庭，反之 false 返回另一個(gè)樣式塊厕吉。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用械念。
eg：假設(shè)要控制一個(gè)元素隱藏或顯示，我們就可以定義一個(gè)混合宏运悲，通過 @if...@else... 來判斷傳進(jìn)參數(shù)的值來控制 display 的值龄减。
//SCSS
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}
編譯出來的CSS:
.block {
display: block;
}
.hidden {
display: none;
}
（2）@for循環(huán)
在sass中有兩種for循環(huán)實(shí)現(xiàn)方式。
@for $i from <start> through <end>班眯、
@for $i from <start> to <end>
其中希停，$i 表示變量、start 表示起始值署隘、end 表示結(jié)束值
兩者區(qū)別是關(guān)鍵字 through 表示包括 end 這個(gè)數(shù)宠能，而 to 則不包括 end 這個(gè)數(shù)。
eg：@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
編譯出來的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
（3）@while循環(huán)
@while 后面的條件為 true 就會(huì)執(zhí)行
（4）@each .. in .. 循環(huán)
@each $var in <list>
其中磁餐，$var為變量名违崇，<list>為值列表。
（5）函數(shù)
字符串函數(shù)
unquote($string)：刪除字符串中的引號(hào)诊霹；
quote($string)：給字符串添加引號(hào)羞延。
To-upper-case()、To-lower-case()
數(shù)字函數(shù)
percentage($value)：將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值脾还；
round($value)：將數(shù)值四舍五入伴箩，轉(zhuǎn)換成一個(gè)最接近的整數(shù)；
ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)鄙漏；
floor($value)：將一個(gè)數(shù)去除他的小數(shù)部分嗤谚；
abs($value)：返回一個(gè)數(shù)的絕對(duì)值；
min($numbers…)：找出幾個(gè)數(shù)值之間的最小值怔蚌；
max($numbers…)：找出幾個(gè)數(shù)值之間的最大值巩步；
random(): 獲取隨機(jī)數(shù)
eg: .footer{
width : percentage(0.5);//50%
width : round(0.5); //1
width : ceil(0.5); //1
width : floor(0.5); //0
width : abs(-0.5); //0.5
width : min(1,2,3,4); //1
width : max(1,2,3,4); //4
width : random(); //隨機(jī)數(shù)
}
列表函數(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è)多維的列表；
zip(solid dashed,1px 2px,green blue)
((1px "solid" #008000), (2px "dashed" #0000ff))
index($list, $value)：返回一個(gè)值在列表中的位置值钞钙。
Introspection函數(shù)（判斷類型函數(shù)）
type-of($value)：返回一個(gè)值的類型
unit($number)：返回一個(gè)值的單位
unitless($number)：判斷一個(gè)值是否帶有單位
comparable($number-1, $number-2)：判斷兩個(gè)值是否可以做加鳄橘、減和合并
Miscellaneous 函數(shù)（三元條件函數(shù)）
if($condition,$if-true,$if-false)
表達(dá)式的意思是當(dāng) $condition 條件成立時(shí)，返回的值為 $if-true芒炼，否則返回的是 $if-false 值瘫怜。
Map（數(shù)據(jù)地圖，也有人稱其為數(shù)組）
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
map相關(guān)函數(shù)
map-get($map,$key) 函數(shù)的作用是根據(jù) $key 參數(shù)本刽，返回 $key 在 $map 中對(duì)應(yīng)的 value 值鲸湃。如果 $key 不存在 $map中赠涮，將返回 null 值。
map-has-key($map,$key) 函數(shù)將返回一個(gè)布爾值暗挑。當(dāng) $map 中有這個(gè) $key笋除，則函數(shù)返回 true，否則返回 false炸裆。
map-keys($map) 函數(shù)將會(huì)返回 $map 中的所有 key垃它。這些值賦予給一個(gè)變量，那他就是一個(gè)列表烹看。
map-values($map) 函數(shù)類似于 map-keys($map) 功能国拇，不同的是 map-values($map )獲取的是 $map 的所有 value 值，可以說也將是一個(gè)列表惯殊。
map-remove($map,$key) 函數(shù)是用來刪除當(dāng)前 $map 中的某一個(gè) $key酱吝，從而得到一個(gè)新的 map。其返回的值還是一個(gè) map土思。
keywords($args) 函數(shù)可以說是一個(gè)動(dòng)態(tài)創(chuàng)建 map 的函數(shù)务热。可以通過混合宏或函數(shù)的參數(shù)變創(chuàng)建 map浪漠。參數(shù)也是成對(duì)出現(xiàn)陕习，其中 $args 變成 key(會(huì)自動(dòng)去掉$符號(hào))，而 $args 對(duì)應(yīng)的值就是value址愿。
顏色函數(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])：把兩種顏色混合在一起律适。
關(guān)于 HSL 的顏色函數(shù)
hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度 (saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色遏插；
hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）捂贿、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色胳嘲；
hue($color)：從一個(gè)顏色中獲取色相（hue）值厂僧；
saturation($color)：從一個(gè)顏色中獲取飽和度（saturation）值；
lightness($color)：從一個(gè)顏色中獲取亮度（lightness）值了牛；
adjust-hue($color,$degrees)：通過改變一個(gè)顏色的色相值颜屠，創(chuàng)建一個(gè)新的顏色辰妙；
lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮甫窟，創(chuàng)建一個(gè)新的顏色密浑；
darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗粗井，創(chuàng)建一個(gè)新的顏色肴掷；
saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和背传，從而創(chuàng)建一個(gè)新的顏色
desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和台夺，從而創(chuàng)建出一個(gè)新的顏色径玖；
grayscale($color)：將一個(gè)顏色變成灰色，相當(dāng)于desaturate($color,100%);
complement($color)：返回一個(gè)補(bǔ)充色颤介，相當(dāng)于adjust-hue($color,180deg);
invert($color)：反回一個(gè)反相色梳星，紅、綠滚朵、藍(lán)色值倒過來冤灾，而透明度不變。
Opacity函數(shù)
alpha($color) /opacity($color)：獲取顏色透明度值辕近；
rgba($color, $alpha)：改變顏色的透明度值韵吨；
opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明移宅。
（十二） sass的@規(guī)則
1.@import
Sass 擴(kuò)展了 CSS 的 @import 規(guī)則归粉，讓它能夠引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都會(huì)被合并并輸出一個(gè)單一的 CSS 文件漏峰。 另外糠悼，被導(dǎo)入的文件中所定義的變量或 mixins 都可以在主文件中使用。
若導(dǎo)入的scss/sass文件不希望被編譯浅乔，則可以在文件名前面加一個(gè)下劃線(如—命名為_colors.scss文件)倔喂，就能避免被編譯。 并在引入該文件時(shí)省略掉文件名前面的下劃線（@import "colors";//不用加下劃線）靖苇。
*注意席噩，在同一個(gè)目錄不能同時(shí)存在帶下劃線和不帶下劃線的同名文件。 例如顾复， _colors.scss 不能與 colors.scss 并存班挖。
2.@media
<media type>：指定設(shè)備類型（IE8及以下只能實(shí)現(xiàn)CSS2中，即設(shè)置媒體類型）
<expression>：指定媒體查詢使用的媒體特性（css3）
@media 指令和 CSS 的使用規(guī)則一樣的簡(jiǎn)單芯砸，但它有另外一個(gè)功能萧芙，可以嵌套在 CSS 規(guī)則中给梅。有點(diǎn)類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令双揪，它將冒泡到外面动羽。
3.@extend
.@extend 是用來擴(kuò)展選擇器(類選擇器，其他任何選擇器渔期，如a:hover等)或占位符(%***)
4.@at-root
@at-root 從字面上解釋就是跳出根元素运吓。當(dāng)你選擇器嵌套多層之后，想讓某個(gè)選擇器跳出疯趟，此時(shí)就可以使用 @at-root拘哨。
5.@debug
@debug 在 Sass 中是用來調(diào)試的，當(dāng)你的在 Sass 的源碼中使用了 @debug 指令之后信峻，Sass 代碼在編譯出錯(cuò)時(shí)倦青，在命令終端會(huì)輸出你設(shè)置的提示 Bug
6.@warn
@warn 和 @debug 功能類似，用來幫助我們更好的調(diào)試 Sass
7.@error
@error和 @warn盹舞、@debug 功能是如出一轍
