Sass學習筆記--Sass的編譯

命令行編譯

• 單個sass文件編譯

  sass  <要編譯的Sass文件路徑> : <要輸出CSS文件路徑>

• 多文件編譯（整個項目目錄文件下所有的sass/scss同時操作）

  sass sass/:css/

  上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，並且將這些 CSS 文件都放在項目中“css”文件夾中。

• 開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，並且給你直接編譯出來

  sass --watch  <要編譯的Sass文件路徑> :   <要輸出CSS文件路徑> 

GUI 界面工具編譯 

• 推薦使用 Koala
  
  • 下載地址(http://koala-app.com/)
  • 一般教程(http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html）

IDE自助編譯

　　webstorm設置

1. 點擊左上角的File→Settings→File Watchers
2. 在彈窗的窗口的右上角點擊綠色的 ‘+’ 號,然后選擇scss
3. arguments(配置編譯后的文件的輸出路徑)

   --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

4. Output paths to refresh

   $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

1. 

常見的編譯錯誤

• 在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置為“utf-8”
• 在項目中文件命名或者文件目錄命名不要使用中文字符
• 其他人為失誤造成的編譯失敗，在編譯過程中都會有具體的說明，可以根據編譯器提供的錯誤信息進行對應的修改。

四種編譯后css樣式

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

• 編譯出來的CSS樣式風格的選擇完全是個人喜好問題，可以根據自己喜歡的風格選擇參數。
• 一段時間之后，你實際上就不再需要寫 CSS 代碼了，只用寫 Sass 代碼。

這里有一段scss

 

 

嵌套輸出方式 （nested）

sass --watch test.scss:test.css --style nested

css

 

---

 

展開輸出方式 ( expanded )

sass --watch test.scss:test.css --style expanded

css

(編譯結果css文件與第一種基本相同，只不過結束的大括號需要獨占一行)

 

 

---

 

緊湊輸出方式 compact 

sass --watch test.scss:test.css --style compact

css

艾瑪，令強迫症患者不安的單行樣式出現了

---

 　

壓縮輸出方式 compressed

sass --watch test.scss:test.css --style compressed

css

輸的的css 代碼被壓縮為單行寫法，隨着我們以后工作中大量使用Sass直接寫樣式，css代碼輸出一般為單行壓縮式。