前言
scss（sass）是目前世界上最為成熟竿屹、穩(wěn)定的css預處理器，它可以無縫銜接目前市面上所有版本的css庫灸姊，為css增加編程性拱燃，使css無需考慮瀏覽器的兼容問題，讓CSS更加簡潔力惯，適應性更強碗誉，可讀性更佳，更易于代碼的維護等諸多好處父晶。
1哮缺、scss和sass
scss和sass都是一種css預處理器語言，他們性質十分相近甲喝，但是還是有一定程度的區(qū)別的
1蝴蜓、scss的文件擴展名是.scss，而sass的文件擴展名是.sass
2俺猿、Sass是以嚴格縮進式語法規(guī)則來書寫的茎匠，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似押袍。
2诵冒、首行聲明
在使用scss時，首先要做的第一件事就是聲明編碼類型谊惭，如下↓↓↓
就是將這個scss文件聲明為utf-8的編碼格式汽馋，這里有一個需要注意的點
utf-8的后面一定要記得家分號侮东，而大多數(shù)編譯工具都不會提示你需要加分號，這就導致很多人在剛接觸的時候就直接“over”豹芯。
3悄雅、將scss文件轉為css文件
當我們編寫好scss代碼時，我們的工作量其實只完成了一半铁蹈，我們的最終目標是css文件宽闲，所以我們需要一步“轉化”。
通常你的編譯工具應該都會自帶這個轉化功能握牧，我以hbuilder為例子容诬，我們先選擇工具，然后選擇預編譯器設置：
雙擊.sass.scss：
點擊智能完成就配置好了沿腰，不過也會出現(xiàn)只能完成是灰的情況览徒，這個時候你就需要根據界面中的環(huán)境變量說明，再結合自己的情況手動填寫了颂龙。
不過习蓬，有的時候我們也會離開編譯工具，那這個時候我們應該如何轉化scss文件呢措嵌？
這個時候我們就可以使用命令行的方式編譯
首先我們先進到scss文件所在目錄：
然后在地址欄中輸入cmd打開命令行：
我以圖中的new_file.scss文件為例子躲叼，單個文件的編譯方式為：
單文件編譯 scss 目標文件 生成目錄/文件名
然后我們再打開文件夾一看：
果然生成了css文件，順帶還生成了一個.map文件铅匹，大家可千萬別把這個文件刪除了押赊，.map文件適用于定位css代碼位于scss的行數(shù)饺藤，方便代碼調試包斑。
下面我在介紹幾種不同風格的轉碼方式：
--style nested：嵌套縮進的css代碼，它是默認值涕俗。
--style expanded：沒有縮進的罗丰、擴展的css代碼。
--style compact：簡潔格式的css代碼再姑。
--style compressed：壓縮后的css代碼萌抵。
有人會說，一個一個轉換不是很麻煩嗎元镀，如果我的文件多绍填，那要轉到猴年馬月啊，那么現(xiàn)在我來介紹如何使用命令行實時監(jiān)測轉碼：
實時監(jiān)控：scss --watch 監(jiān)測目錄:生成目錄
這樣只要你在檢測目錄下生成新的scss文件栖疑，命令行就會自動幫你在生成目錄下創(chuàng)建css文件了讨永，
不過在命令行需要一直打開才行，如果你退出命令行遇革，檢測就會結束卿闹。
4揭糕、路徑
這是個老生常談的問題了，不要有中文锻霎！著角，不要有中文！旋恼，不要有中文吏口！
這些個語言啊，軟件啊蚌铜，都是老外寫的锨侯，所以他們都是不懂中文的，understand冬殃！
5囚痴、一些scss語法
scss和css不同，他是有編程性的审葬，下面我就來介紹一些scss的語法
聲明變量：$變量名
聲明函數(shù)：@function 函數(shù)名（）{}
混淆：@mixin（通過@include拼接）：
混淆的功能是將寫好的部分代碼接入其他代碼深滚，他通過@include進行拼接
舉個例子：我們有下列一串代碼
@mixin center-block { margin-left: auto; margin-right: auto; }
#header{ width:1000px; @include center-block; }
.gallery{ width:600px; @include center-block; }
然后我們將它們轉譯為css，就會得到下列代碼↓↓↓
#header { width: 1000px; margin-left: auto; margin-right: auto; }
.gallery { width: 600px; margin-left: auto; margin-right: auto; }
繼承：@extend
繼承用于共享規(guī)則和選擇器之間的關系涣觉。它可以擴展所有其他類的樣式在一個類中痴荐，也可應用于自己特定的樣式。
舉個例子：我們有下列代碼
.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;
}
導入：@import 文件名（不用后綴）
導入的作用是將一個scss文件引入另一個scss文件
舉個例子官册，我們有以下代碼
@mixin center-block { margin-left: auto; margin-right: auto; }
我們將這個這個文件寫在mixin.scss文件中,然后我們在一個新的scss文件中寫如下代碼
@import 'mixin';
#header{ width:1000px; @include center-block; }
.gallery{ width:600px; @include center-block; }
然后我們將它們轉譯為css生兆，就會得到下列代碼↓↓↓
#header { width: 1000px; margin-left: auto; margin-right: auto; }
.gallery { width: 600px; margin-left: auto; margin-right: auto; }
6、防轉碼
有些時候膝宁，如果我們不想轉譯某些文件該怎么辦呢蝇狼，其實我們只要在scss文件的名字前加_ 乳规，這樣scss文件就不會被檢測到譬涡。
不過這個方法在使用編譯工具自動轉碼時貌似會失效怀骤，所以大家酌情使用。
