1孤钦、什么是CSS預處理器，什么是Sass
**（1） **CSS 預處理器用一種專門的編程語言纯丸，進行 Web 頁面樣式設計偏形，然后再編譯成正常的 CSS 文件，以供項目使用觉鼻。
（2） Sass是一種最早出現(xiàn)的“CSS預編譯處理器”俊扭，進行網(wǎng)頁樣式設計，然后再編譯成正常的CSS文件坠陈。Sass提供了許多便利的寫法萨惑，大大節(jié)省了設計者的時間，使得CSS開發(fā)仇矾，變得簡單和可維護 咒钟。
2、Sass與SCSS有什么區(qū)別
(1).文件擴展名不同若未，Sass 是以“.sass”后綴為擴展名朱嘴，而 SCSS 是以“.scss”后綴為擴展名
(2).語法書寫方式不同，Sass 是以嚴格的縮進式語法規(guī)則來書寫粗合，不帶大括號({})和分號(;)萍嬉，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似
Sass 語法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333; //定義變量
body
font: 100% $font-stack
color: $primary-color
** SCSS 語法**
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
3、sass與scss和純css寫法差別
Sass 和 CSS 寫法的確存在一定的差異隙疚，由于 Sass 是基于 Ruby 寫出來壤追，所以其延續(xù)了 Ruby 的書寫規(guī)范。在書寫 Sass 時不帶有大括號和分號供屉，其主要是依靠嚴格的縮進方式來控制的行冰。如：
Sass寫法：
body
color: #fff
background: #f36
而在 CSS 我們是這樣書寫：
body{
color:#fff;
background:#f36;
}
SCSS 和 CSS 寫法無差別溺蕉，這也是 Sass 后來越來越受大眾喜歡原因之一。簡單點說悼做，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用疯特。
4、Sass 語法格式
這里說的 Sass 語法是 Sass 的最初語法格式肛走，他是通過 tab 鍵控制縮進的一種語法規(guī)則漓雅，而且這種縮進要求非常嚴格。另外其不帶有任何的分號和大括號朽色。常常把這種格式稱為 Sass 老版本邻吞，其文件名以“.sass”為擴展名。來看一個 Sass 語法格式的簡單示例葫男。假設我們有一段這樣的 CSS 代碼：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
現(xiàn)在用 Sass 的語法格式來編寫：
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
在整個 Sass 代碼中抱冷，我們沒看到類似 CSS 中的大括號和分號。
注：這種語法格式對于前端人員都不太容易接受梢褐，而且容易出錯徘层。
5、利职、SCSS語法格式
SCSS 是 Sass 的新語法格式趣效，從外形上來判斷他和 CSS 長得幾乎是一模一樣，代碼都包裹在一對大括號里猪贪，并且末尾結(jié)束處都有一個分號跷敬。其文件名格式常常以“.scss”為擴展名。
同樣的這段 CSS 代碼：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
我們使用 SCSS 語法格式將按下面這樣來書寫：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
6热押、了解sass前世和它安裝的前提條件
（1）sass 是基于ruby來發(fā)明的 這也決定了他前期的語法結(jié)構(gòu)類似ruby的嚴格縮進的風格西傀。
（2）我們想利用sass語言 必須要安裝ruby的安裝包 以ruby為開發(fā)環(huán)境 來編寫sass。
（3）在ruby環(huán)境下使用 gem install sass(網(wǎng)絡安裝方式)gem install 本地sass安裝包的路徑桶癣。
- sass的編譯
（1）命令編譯
sass .scss:.css
（2）GUI圖形化界面操作編譯
koala
(特別注意：)注意ruby 和 koala 安裝目錄下的核心配置文件的編碼格式 為“UTF-8”
7拥褂、輸出方式
nested：嵌套縮進的css代碼，它是默認值牙寞。
expanded：沒有縮進的饺鹃、擴展的css代碼。
compact：簡潔格式的css代碼间雀。
compressed：壓縮后的css代碼悔详。
8、Sass聲明變量
· 變量聲明符($) 變量名稱：變量值; $width: 300px;
· 普通變量：聲明變量以后可以在全局范圍內(nèi)使用;
· 默認變量：在值的后面加上惹挟！default;
· 全局變量：定義在元素外面的變量
· 局部變量：定義在元素內(nèi)部的變量
· 全局變量的影子：變量名稱相同下茄螃，局部變量稱之為全局變量的影子，局部變量只在局部范圍內(nèi)覆蓋全局變量
9连锯、嵌套：
選擇器嵌套归苍，
nav{
a{
color:red;
header &{color:green;}
}
}
屬性嵌套用狱，
.box{
border:{
top:1px solid red;
bottom:1px solid green;
}
}
偽類嵌套
.clearfix{
&:before,&:after{content:"";display:table;}
&:after{clear:both;overflow:hidden;}
}
10、混合宏的聲明拼弃、調(diào)用夏伊、參數(shù)
(1)@mixin:聲明混合宏的關鍵字
(2)@include：調(diào)用混合宏的關鍵字
(3)混合宏的傳參有三種寫法
1. 只傳變量名，調(diào)用的時候再去傳值
2. 變量直接在混合宏中賦值
3. 基于前兩種我們也可以傳多個參數(shù) 注意“ ... ”
11肴敛、Sass擴展/繼承
·通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現(xiàn)代碼的繼承吗购。
·繼承特點：為了減少冗余的代碼医男。
·語法：@extend 要繼承的對象。
12捻勉、占位符
占位符聲明關鍵字：%placeholder
特點：不被繼承就不會編譯成css代碼
總結(jié)：聲明方式不同镀梭、調(diào)用方法不同、使用環(huán)境不同
·混合宏：
聲明方式：@mixin
調(diào)用方法：@include
使用環(huán)境：相同的代碼塊在不同的環(huán)境傳遞不同的值踱启，可以通過混合宏來定義重復使用的代碼塊报账。
不足：針對相同的樣式，會造成冗余（對于）的代碼塊埠偿。
·繼承：
聲明方式：.class
調(diào)用方法：@extend
使用環(huán)境：相同的代碼塊不需要傳遞不同的值透罢，使用Sass的繼承來調(diào)用已存在的基類。使用繼承會將調(diào)用相同基類的代碼合并到一起冠蒋。
不足：如果基類羽圃，并不存在于HTML結(jié)構(gòu)時，不管調(diào)不調(diào)用抖剿，都會被編譯在css中朽寞。
·占位符：
聲明方式：%placeholder
調(diào)用方法：@extend
使用環(huán)境：和繼承類似，不同的是斩郎，相同的代碼塊并沒有在基類中存在脑融，而是額外聲明。如果不調(diào)用以聲明的占位符缩宜，將不會產(chǎn)生任何樣式的代碼肘迎。如果在不同選擇器調(diào)用，將會把編譯出的相同的css代碼合并在一起锻煌。
13膜宋、插值
·聲明插值的關鍵語法：#{}
·特點：Sass獲得一個更好的結(jié)構(gòu)體系。比如說想寫更干凈的炼幔、高效的和面向?qū)ο蟮腃SS秋茫。
·是指變量插值惫撰，或者變量替換矩动。
$a:(margin,padding); //聲明一個變量
@mixin set-value($side,$value){ //聲明一個混合宏 和兩個形參
@each $b in $a{ //遍歷語句 $a是被遍歷的對象 $b遍歷中當前取到的值
#{$b}-#{$side}:$value; //動態(tài)生成我們想要的屬性
}
}
.box{
@include set-value(top,14px);
}
***編譯后的CSS***
.box{
margin-top:14px;
padding-top:14px;
}
·當想設置屬性值的時候你可以使用字.符串插入進來，另一個有用的用法是構(gòu)建一個選擇器。
@mixin size($class, $small, $medium, $big){
.#{$class}-small { font-size:$small; }
.#{$class}-medium{ font-size: $medium; }
.#{$class}-big{ font-size: $big; }
}
@include size("header-text",12px,20px,40px);
***編譯后的CSS***
.header-text-small{ font-size: 12px; }
.header-text-medium{ font-size: 20px; }
.header-text-big{ font-size: 40px; }
注釋
/類似CSS注釋/
//類似JS注釋
14尝苇、Sass數(shù)據(jù)類型
數(shù)字：1,2,3,10px;
字符串：有引號字符串(單引號和雙引號) 和 無引號字符串;在用插值語句時，有引號字符串將被編譯為無引號字符串贱案，方便了在混合指令中引用選擇器名省骂。
顏色：blue、red...;
布爾：true局荚、false;
空值：null;
值列表：用空格和逗號分開的;
15超凳、運算
加法：可以做各種運算，但對于不同類型的單位耀态，在計算時會報錯
.box {
width: 20px + 8in;
} //width: 788px;
減法：和加法類似轮傍，碰到不同類型的單位也會報錯
$a:50px;
$b:10px;
.box{
width: $a - $b
} //width: 40px;
乘法：能夠支持多種單位，但當一個單位同時聲明兩個值會報錯,碰到不同類型的單位也會報錯首装。
.box {
width: 10px * 2;
} //width: 20px;
除法：除法用/代替 運算的時候要加括號
.box {
width: (100px / 2);
} //width:50px;
變量運算
·可以使用變量進行運算
$a:20px;
$b:10px;
$c:5px;
.box{
width:$a + $b + $c
} //width:35px;
顏色運算
·紅綠藍各顏色分段單獨運算
p {
color: #010203 + #040506;
} //color: #050709;
字符運算
·用"+"對字符串拼接
div {
cursor: e + -resize;
} //cursor: e-resize;
數(shù)字運算
·和數(shù)學運算一樣
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
} // width: 60px;
