寫這篇文章是為了記錄一下?平時忽略的Sass方面的知識點，發現雖然平時一直在用，但是對Sass真的是知之甚少。完整的用法可以參照官網。如有錯誤，請大神指出。
1.CSS預處理器
學過CSS的人都知道，CSS不能算是一門編程語言，只是一行行單純的屬性描述用來控制網頁樣式，寫起來相當的費事，而且代碼難易組織和維護。
CSS預處理器定義一種專門的語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。可以在這種語言中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。
本文主要講解Sass語言。
2.Sass和Scss有什么區別？
Sass有兩種語法：
1）第一種比較老的稱為縮排語法，由于 Sass 是基于 Ruby 寫出來，所以其延續了 Ruby 的書寫規范。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的，不能兼容現有的css代碼，這也是Sass早期不受歡迎的原因。使用這種語法的樣式表文件以.sass為后綴名。
Sass寫法：
body
color: #fff
background: #f36
2）第二種稱為 SCSS (Sassy CSS)，是Sass進行改良后的結果，是 Sass 3 引入新的語法,其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能。以.scss作為后綴名。
這兩種語法可以使用命令行工具sass-convert相互轉換：
# 將 Sass 轉換為 SCSS
$ sass-convert style.sass style.scss
# 將 SCSS 轉換為 Sass
$ sass-convert style.scss style.sass
下面提到的sass文件都是指以.scss為后綴名的文件
3.基本用法
3.1編譯
使用下面的命令可以將.scss文件
#單文件編譯
sass input.sass:output.css
#多文件編譯
sass input-dir:output-dir
在編譯 Sass 時，開啟“watch”功能， 一旦代碼有任何修改，可以自動監測到代碼的變化，并且直接編譯出來：
sass --watch input.sass:output.css
sass --watch input-dir:output-dir
Sass提供4種編譯風格，編譯時代上參數 --style NAME
嵌套輸出方式 nested (默認值)
展開輸出方式 **expanded **
緊湊輸出方式 **compact **
壓縮輸出方式 compressed
如下，原scss文件代碼為：
table{
tr{
td{
padding:5px;
}
}
a{
display:inline-block;
padding:10px;
}
}
4種風格編譯后的結果為
//nested
table tr td {
padding: 5px; }
table a {
display: inline-block;
padding: 10px; }
//expanded 與nested類似，大括號另起一行
table tr td {
padding: 5px;
}
table a {
display: inline-block;
padding: 10px;
}
//compact 結果為單行css
table tr td { padding: 5px; }
table a { display: inline-block; padding: 10px; }
#compressed 一般生產環境中會選擇壓縮css代碼，刪掉注釋與空格
table tr td{padding:5px}table a{display:inline-block;padding:10px}
3.2基本特性
1)變量
Sass中可以定義變量，以$打頭，如果值后面加上!default則表示默認值
$green:#55b929 !default;
a{
color:$green;
}
默認變量在組件化開發中非常有用。它很像css屬性中 !important 標簽的對立面，不同的是!default用于變量，含義是：如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。
$side : left;
.rect {
border-#{$side}-color: $green;
}
2）屬性嵌套
平時用的較多的是選擇器嵌套，孰不知屬性也可以嵌套
//屬性嵌套
.title {
font: {
size: 12px;
weight: bold;
}
}
3）~同層組合選擇器
選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }
4）混合宏 VS 繼承 VS 占位符
什么時候用混合宏，什么時候用繼承，什么時候使用占位符？其實他們各有各的優點與缺點:
看看三種方式編譯出來的css
//SCSS中混合宏使用
@mixin mt($var){
margin-top: $var;
}
.block {
@include mt(5px);
span {
display:block;
@include mt(5px);
}
}
.header {
color: orange;
@include mt(5px);
span{
display:block;
@include mt(5px);
}
}
//SCSS 繼承的運用
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
span {
display:block;
@extend .mt;
}
}
.header {
color: orange;
@extend .mt;
span{
display:block;
@extend .mt;
}
}
//SCSS中占位符的使用
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
span {
display:block;
@extend %mt;
}
}
.header {
color: orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
編譯結果：
//SCSS中混合宏使用
.block {
margin-top: 5px;
}
.block span {
display: block;
margin-top: 5px;
}
.header {
color: orange;
margin-top: 5px;
}
.header span {
display: block;
margin-top: 5px;
}
//SCSS 繼承的運用
.mt, .block, .block span, .header, .header span {
margin-top: 5px;
}
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
//SCSS中占位符的使用
.block, .block span, .header, .header span {
margin-top: 5px;
}
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
總結：
- 混合宏可以傳參，如果代碼中涉及變量，建議用混合宏
- 如果代碼不需要傳參，且有一個基類已在文件中存在，那么建議使用 Sass 的繼承
- 占位符與繼承類似，但是占位符是獨立定義，不調用的時候是不會在 CSS 中產生任何代碼；繼承是首先有一個基類存在，不管調用與不調用，基類的樣式都將會出現在編譯出來的 CSS 代碼中。
