## Sass入門指南 >時間：2016-09-24 22:56:12 >作者：zhongxia >這里就不講解Sass的安裝以及語法了，因為參考文章中，阮一峰老師寫的很詳細，另外一篇也寫的很不錯，直接學習即可。 這里主要寫下自己的看法，或者不懂的地方。 常規的CSS是不支持變量，函數，以及一些簡單的判斷，計算等。只有單純的描述，如果多個地方使用同一個顏色，或者字體大小，要修改起來比較麻煩。 因此，就有人給CSS加入了一些編程元素，這被叫做 **"CSS預處理器"（css preprocessor）** 常見的 CSS預處理器，有**Less， Sass , Stylus** ## 強調 >摘自[《sass入門指南》](http://riny.net/2014/sass-guide/) - sass不是css的替代品，它只是讓css變得更加高效、可維護 - 永遠不要修改生成后的css - 部署到線上的是生成的css文件，不是sass文件 sass的工作流如下圖  ## Sass文件格式 Sass 有兩種文件格式 ### .sass文件 .sass文件是縮進式的寫法，對格式要求比較嚴謹，末尾不能有分號, 屬性和值之間有一個空格 ``` .test margin: 5px 10px font-size: 14px color: #333 ``` ### .scss文件 .scss文件 和 css 一致 ``` .test { margin: 5px 10px; font-size: 14px; color: #333; } ``` ## Sass 的 import 導入功能 css有一個不太常用的特性，即@import導入功能，它允許在一個css文件中導入其他css文件。然而，**結果是只有執行到@import規則時，瀏覽器才會去下載其他css文件，這會導致頁面樣式加載特別慢，從而容易出現頁面閃的問題。** 但是 sass中，使用 import則可以規避這個問題， 因為sass最終會生成一個CSS文件，在生成的時候，會把**導入的CSS 給合并到CSS文件里面**。 在使用@import導入sass文件時，可以省略sass文件的后綴名.sass或.scss，例如： ~~~ //a.scss body { background-color: #f00; } //style.scss @import "a"; div { color: #333; } ~~~ 編譯后的style.css文件內容如下: ~~~ body { background-color: #f00; } div { color: #333; } ~~~ ## 參考文章 1. [SASS用法指南](http://www.ruanyifeng.com/blog/2012/06/sass.html) 2. [sass入門指南](http://riny.net/2014/sass-guide/)