前言
scss（sass）是目前世界上最為成熟、穩(wěn)定的css預(yù)處理器，它可以無縫銜接目前市面上所有版本的css庫，為css增加編程性，使css無需考慮瀏覽器的兼容問題，讓CSS更加簡(jiǎn)潔，適應(yīng)性更強(qiáng)，可讀性更佳，更易于代碼的維護(hù)等諸多好處。
1、scss和sass
scss和sass都是一種css預(yù)處理器語言，他們性質(zhì)十分相近，但是還是有一定程度的區(qū)別的
1、scss的文件擴(kuò)展名是.scss，而sass的文件擴(kuò)展名是.sass
2、Sass是以嚴(yán)格縮進(jìn)式語法規(guī)則來書寫的，不帶大括號(hào)和分號(hào)；而SCSS的語法和CSS書寫語法類似。
2、首行聲明
在使用scss時(shí)，首先要做的第一件事就是聲明編碼類型，如下↓↓↓
就是將這個(gè)scss文件聲明為utf-8的編碼格式，這里有一個(gè)需要注意的點(diǎn)
utf-8的后面一定要記得家分號(hào)，而大多數(shù)編譯工具都不會(huì)提示你需要加分號(hào)，這就導(dǎo)致很多人在剛接觸的時(shí)候就直接“over”。
3、將scss文件轉(zhuǎn)為css文件
當(dāng)我們編寫好scss代碼時(shí)，我們的工作量其實(shí)只完成了一半，我們的最終目標(biāo)是css文件，所以我們需要一步“轉(zhuǎn)化”。
通常你的編譯工具應(yīng)該都會(huì)自帶這個(gè)轉(zhuǎn)化功能，我以hbuilder為例子，我們先選擇工具，然后選擇預(yù)編譯器設(shè)置：
雙擊.sass.scss：
點(diǎn)擊智能完成就配置好了，不過也會(huì)出現(xiàn)只能完成是灰的情況，這個(gè)時(shí)候你就需要根據(jù)界面中的環(huán)境變量說明，再結(jié)合自己的情況手動(dòng)填寫了。
不過，有的時(shí)候我們也會(huì)離開編譯工具，那這個(gè)時(shí)候我們應(yīng)該如何轉(zhuǎn)化scss文件呢？
這個(gè)時(shí)候我們就可以使用命令行的方式編譯
首先我們先進(jìn)到scss文件所在目錄：
然后在地址欄中輸入cmd打開命令行：
我以圖中的new_file.scss文件為例子，單個(gè)文件的編譯方式為：
單文件編譯 scss 目標(biāo)文件 生成目錄/文件名
然后我們?cè)俅蜷_文件夾一看：
果然生成了css文件，順帶還生成了一個(gè).map文件，大家可千萬別把這個(gè)文件刪除了，.map文件適用于定位css代碼位于scss的行數(shù)，方便代碼調(diào)試。
下面我在介紹幾種不同風(fēng)格的轉(zhuǎn)碼方式：
--style nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
--style expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼。
--style compact：簡(jiǎn)潔格式的css代碼。
--style compressed：壓縮后的css代碼。
有人會(huì)說，一個(gè)一個(gè)轉(zhuǎn)換不是很麻煩嗎，如果我的文件多，那要轉(zhuǎn)到猴年馬月啊，那么現(xiàn)在我來介紹如何使用命令行實(shí)時(shí)監(jiān)測(cè)轉(zhuǎn)碼：
實(shí)時(shí)監(jiān)控：scss --watch 監(jiān)測(cè)目錄:生成目錄
這樣只要你在檢測(cè)目錄下生成新的scss文件，命令行就會(huì)自動(dòng)幫你在生成目錄下創(chuàng)建css文件了，
不過在命令行需要一直打開才行，如果你退出命令行，檢測(cè)就會(huì)結(jié)束。
4、路徑
這是個(gè)老生常談的問題了，不要有中文！，不要有中文！，不要有中文！
這些個(gè)語言啊，軟件啊，都是老外寫的，所以他們都是不懂中文的，understand！
5、一些scss語法
scss和css不同，他是有編程性的，下面我就來介紹一些scss的語法
聲明變量：$變量名
聲明函數(shù)：@function 函數(shù)名（）{}
混淆：@mixin（通過@include拼接）：
混淆的功能是將寫好的部分代碼接入其他代碼，他通過@include進(jìn)行拼接
舉個(gè)例子：我們有下列一串代碼
@mixin center-block { margin-left: auto; margin-right: auto; }
#header{ width:1000px; @include center-block; }
.gallery{ width:600px; @include center-block; }
然后我們將它們轉(zhuǎn)譯為css，就會(huì)得到下列代碼↓↓↓
#header { width: 1000px; margin-left: auto; margin-right: auto; }
.gallery { width: 600px; margin-left: auto; margin-right: auto; }
繼承：@extend
繼承用于共享規(guī)則和選擇器之間的關(guān)系。它可以擴(kuò)展所有其他類的樣式在一個(gè)類中，也可應(yīng)用于自己特定的樣式。
舉個(gè)例子：我們有下列代碼
.style{
font-size: 30px;
font-style: italic;
}
h2{
color: #787878;
@extend .style
}
.container{
@extend h2
}
編譯后的css代碼如下：
.style, h2, .container {
font-size: 30px;
font-style: italic;
}
h2, .container {
color: #787878;
}
導(dǎo)入：@import 文件名（不用后綴）
導(dǎo)入的作用是將一個(gè)scss文件引入另一個(gè)scss文件
舉個(gè)例子，我們有以下代碼
@mixin center-block { margin-left: auto; margin-right: auto; }
我們將這個(gè)這個(gè)文件寫在mixin.scss文件中,然后我們?cè)谝粋€(gè)新的scss文件中寫如下代碼
@import 'mixin';
#header{ width:1000px; @include center-block; }
.gallery{ width:600px; @include center-block; }
然后我們將它們轉(zhuǎn)譯為css，就會(huì)得到下列代碼↓↓↓
#header { width: 1000px; margin-left: auto; margin-right: auto; }
.gallery { width: 600px; margin-left: auto; margin-right: auto; }
6、防轉(zhuǎn)碼
有些時(shí)候，如果我們不想轉(zhuǎn)譯某些文件該怎么辦呢，其實(shí)我們只要在scss文件的名字前加_ ，這樣scss文件就不會(huì)被檢測(cè)到。
不過這個(gè)方法在使用編譯工具自動(dòng)轉(zhuǎn)碼時(shí)貌似會(huì)失效，所以大家酌情使用。
