Sass 是最早的 CSS 預(yù)處理語言，有比 LESS 更為強大的功能，Sass 雖然出現(xiàn)得最早，但遠不如 LESS普及。以下是我學(xué)習(xí)sass 的一些筆記。希望對大家有用。

Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

• 1. 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名
• 2. 語法書寫方式不同，Sass 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)
• 3. 而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似（SCSS 和 CSS 寫法無差別）。簡單點說，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。
• 

• “.sass”只能使用 Sass 老語法規(guī)則（縮進規(guī)則），“.scss”使用的是 Sass 的新語法規(guī)則，也就是SCSS 語法規(guī)則（類似CSS 語法格式）。

  
  

  Sass 的編譯有多種方法：

  • 命令編譯
    

          命令編譯是指使用你電腦中的命令終端，通過輸入 Sass 指令來編譯 Sass。

  • GUI工具編譯
    

  GUI 界面編譯工具，目前較為流行的主要有：

  • 1. Koala (http://koala-app.com/)
  • 2. Compass.app（http://compass.kkbox.com/）
  • 3. Scout（http://mhs.github.io/scout-app/）
  • 4. CodeKit（https://incident57.com/codekit/index.html）
  • 5. Prepros（https://prepros.io/）
    

  相比之下，比較推薦使用以下兩個：

  • Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
  • CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
  • 自動化編譯
    

          Grunt 和 Gulp ，可以通過他們來配置 Sass 的編譯【Grunt-beginner前端自動化工具學(xué)習(xí)：http://www.imooc.com/learn/30】

  常見的編譯錯誤：

  最為常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中，是不支持“GBK”編碼的。所以在創(chuàng)建 Sass 文件時，就需要將文件編碼設(shè)置為“utf-8”。

  另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。

  注意：全文用的是scss寫法

  不同樣式風(fēng)格的輸出方法：

  在 Sass 中編譯出來的樣式風(fēng)格也可以按不同的樣式風(fēng)格顯示。其主要包括以下幾種樣式風(fēng)格：

  代碼例子：

  
  
  • 嵌套輸出方式 nested
    
  
  
  
  • 展開輸出方式 expanded  
    
  
  
  
  • 緊湊輸出方式 compact 
    
  
  
  
  • 壓縮輸出方式 compressed
    
  
  
  

  Sass 調(diào)試

  瀏覽器支持“sourcemap”功能即可。早一點的版本，需要在編譯的時候添加“--sourcemap”  參數(shù)：

  sass --watch --scss --sourcemap style.scss:style.css

  
  

  在 Sass3.3 版本之上（測試使用的版本是 3.4.7），不需要添加這個參數(shù)也可以：

  sass --watch style.scss:style.css

  
  

  SASS無法兼容已有的CSS代碼：sass編譯成css之后，無法反編譯成sass了。就比如生出來塞不回去的意思

  Sass 和 SCSS 有什么區(qū)別？

  Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

  • 1. 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名
  • 2. 語法書寫方式不同，Sass 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的CSS 語法書寫方式非常類似。
    
  
  
  
  文章來自：博客園/老嫩草