一．初識SCSS
在SCSS的官方網站上，他自身的定義是：SCSS是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，
什麼意思呢？其實就是在CSS的基礎上添加了一些新的功能，簡單理解就是強化了CSS的一款工具而已，增加了一些新的語法，讓使用更加方便，功能更加強大。
二．真假SCSS
我們經常聽到SCSS和SASS，總會混淆 二者，感覺二者並沒有什麼太大的區別，或者完全是一樣的？那麼他們到底是什麼，有什麼區別？
其實，SASS有兩種語法格式。
SCSS是其中一種，這種是在CSS3語法的基礎上進行拓展，所以所有的CSS3語法在SCSS中都是通用的，當然CSS的大多數的寫法也是支持的，就算是早期的IE濾鏡寫法也支持，而這種格式以.scss作為拓展名。
另外一種就是被叫做縮進格式，也就是最早的SASS，這是一種簡稱，是一種簡化格式，它使用 “縮進” 代替 “花括號” 表示屬性屬於某個選擇器，用 “換行” 代替 “分號” 分隔屬性，這樣做比 SCSS 更容易閱讀，書寫也更快速。當然縮進格式也可以使用 SASS的全部功能，只是與 SCSS 相比是用的不同的表達方式在某些地方。
所以我們現在通常說的一般都是SCSS。
三．SCSS強大之處
我們說到SCSS增加了很多的功能，這也是SCSS的魅力所在，那麼我們今天就簡單瞭解一下SCSS強大的拓展功能有哪些吧。
1.嵌套規則
我們CSS是不能嵌套的，但是SCSS允許實現嵌套的，內層的樣式將他外層的選擇器作為父選擇器。也就是說：
.parent{
color:red;
.children{
line-height: 40px;
}
}
代表的CSS代碼就是：
.parent{
color:red;
}
.parent .children{
line-height: 40px;
}
可以看出通過嵌套功能我們能讓我們的代碼結果更加清晰，CSS結構更加容易管理，且避免了重複輸入父選擇器。
2.父選擇器&
在我們使用嵌套規則的時候，我們使用是很方便的，但是遇到要選擇父選擇器的時候，應該怎麼辦？比如當給某個元素設置hover樣式的時候。
也就是說使用如下：
.parent{
color:red;
&:hover .children{
background: pink;
}
}
代表的CSS代碼，就是如下的形式：
.parent{
color:red;
}
.parent:hover .children{
background: pink;
}
轉化後的 CSS 文件中&將被替換成嵌套外層的父選擇器。但是如果含有多層嵌套，那麼最外層的父選擇器會一層一層向下傳遞：
3.屬性嵌套
我們經常見到很多的屬性有相同的前綴，比如文本屬性，font-family, font-size, font-weight都以font作為屬性的前綴，為了方便我們使用，SASS允許將屬性嵌套在命名空間中。
例如：
.example{
font: {
family: “微軟雅黑”;
size: 30px;
weight: bold;
}
}
代表的CSS代碼就是：
.example{
font-family: “微軟雅黑”;
font-size: 30px;
font-weight: bold;
}
4.佔位符選擇器%foo
大家對於佔位符選擇器一定很陌生，但是大家一定聽過id選擇器，說類選擇器，他們的寫法分別是# 或者. ，那麼其實佔位符選擇器也就是一個符號而已，%代表的就是我們佔位符選擇器，但是他必須通過@extend指令調用。
但是具體的用法大家現在可以不用管，我們後期會更加詳細給大家講解，現在大家只用記住當佔位符選擇器單獨使用的時候，是不會編譯到CSS文件中。
四．SCSS魅力提煉
感受之後，有沒有覺得我們的SCSS非常的簡單，是我們懶人必備神器，且結構更加清晰，理解更加容易？那麼總的來說，SCSS美在如下幾點：
1.SCSS可以自定義輸出格式。
2.完全兼容CSS3，在CSS基礎上增加了變量、嵌套、混合等功能。
3.提供了控制指令。
4.通過函數可以進行顏色值與屬性值的運算。
閱讀更多 源碼時代 的文章
