一、描述
1. CSS 指層疊樣式表 (Cascading Style Sheets)
2. Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理語言，和html一樣有嚴格的縮進風格，和css編寫規范有着很大的出入，是不使用花括號和分號的，所以不被廣為接受。 Sass 是一款強化 CSS 的輔助工具，是對 CSS 的擴展，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目， 其后綴是.sass。
3. SCSS (Sassy CSS)，一款css預處理語言，SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標准的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。SCSS 需要使用分號和花括號而不是換行和縮進。SCSS 對空白符號不敏感，其實就和css3語法一樣，其后綴名是分別為 .scss。
css：
1. 行內樣式：寫在html里的。<h1 class='bt' style='color：#f00;'>標題</h1> 權重第一
2. 內聯樣式：寫在style里的。<style>.bt{color：#000；}</style> 權重第二
3. 外聯樣式：寫在script里引入文件里的。<script src='./css/style.css'></script> 權重第三
sass：
sass是有ruby語言編寫的，一款css預處理器語言。和html一樣有嚴格的縮進風格，和css編寫規范有很大的區別，sass是不使用花括號和分號的，所以不太被大眾接受。
// deom.sass
#sidebar width: 30%
background-color: #faa
簡單說下scss：
scss也是css的預處理語言，scss是sass版本3.0引入的新語法。后綴名有.sass和.scss兩種。
sass版本3.0之前的后綴名是.sass，版本3.0之后的后綴名是.scss
與sass的區別：scss的編寫規范和css一樣，需要花括號和分號。
// demo.scss #sidebar { width: 30%; background-color: #faa; }
二、使用sass
1. 安裝：直接在vs code編譯器安裝使用擴展插件-----easy sass
2. 配置：在菜單欄一次進入‘文件---首選項---設置’，打開 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相關的設置項復制到右側的用戶設置編輯窗口中，再根據實際情況修改配置項。
3. 新建文件夾：sass>demo.sass和css（沒有新建css，編譯后也會生成一個文件夾）
1. easysass.formats[i].format 支持四個選項用以編譯生成對應風格的css：
nested：嵌套縮進的css代碼
expended：沒有縮進的、擴展的css代碼
compact：簡潔格式的css代碼
compressed：壓縮后的css代碼
2. easysass.formats[i].extension 就是編譯后輸出的文件名，可自定義文件名。例如當前sass文件是demo.sass，extension 設置為.min.css，最后編譯出來的css
文件就是demo.min.css。
3. easysass.targetDir 配置輸出路徑，相對路徑和絕對路徑都可。例如設置為'./css/'，即會在sass同級的css文件夾里生成
這種 VSCode 編輯器編譯生成 CSS 的方式，可能比較原始，生產環境中大多采用自動化構建方案，比如 grunt、gulp、fis 等。
- CSS 指層疊樣式表 (Cascading Style Sheets)
- Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理語言，和html一樣有嚴格的縮進風格，和css編寫規范有着很大的出入，是不使用花括號和分號的，所以不被廣為接受。 Sass 是一款強化 CSS 的輔助工具，是對 CSS 的擴展，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目， 其后綴是.sass。
- SCSS (Sassy CSS)，一款css預處理語言，SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標准的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。SCSS 需要使用分號和花括號而不是換行和縮進。SCSS 對空白符號不敏感，其實就和css3語法一樣，其后綴名是分別為 .scss。