[TOC] ## Sass 的語法格式 Sass 有兩種語法格式，sass和scss。 ### SCSS 首先是 SCSS (Sassy CSS) —— 也是本書示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行拓展，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作為拓展名。 ### Sass 另一種也是最早的 Sass 語法格式，被稱為縮進格式 (Indented Sass) 通常簡稱 "Sass"，是一種簡化格式。它使用 “縮進” 代替 “花括號” 表示屬性屬于某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認為這樣做比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個別地方采取了不同的表達方式，具體請查看 the indented syntax reference。這種格式以 .sass 作為拓展名。 ### Sass和Scss的區別 Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點： - 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名 - 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。 ### 代碼演示  ### Sass/Scss和純CSS寫法差很多嗎？ 寫法差很多嗎？這是很多初學者會問的一個問題。那么借此機會簡單了解一下。 **Sass 和 CSS 寫法有差別：** Sass 和 CSS 寫法的確存在一定的差異，由于 Sass 是基于 Ruby 寫出來，所以其延續了 Ruby 的書寫規范。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的。如： **Sass寫法：** ``` body color: #fff background: #f36 ``` 而在 CSS 我們是這樣書寫： ``` body{ color:#fff; background:#f36; } ``` **SCSS 和 CSS 寫法無差別：** SCSS 和 CSS 寫法無差別，這也是 Sass 后來越來越受大眾喜歡原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。