sass初學入門筆記（一）

我自己是個新手，一邊學sass一邊記下的筆記，可能有點羅嗦，可是複習起來的話仍是比較全面直觀的。固然，最重要的仍是去實踐，實踐得真理

其它 CSS 預處理器語言：

CSS 預處理器技術已經很是的成熟，並且也涌現出了不少種不一樣的 CSS 預處理器語言，好比說：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

在衆多優秀的 CSS 預處理器語言中就屬  Sass、LESS 和 Stylus 最優秀，討論的也多，對比的也多。

 

Sass 是最先的 CSS 預處理語言，有比 LESS 更爲強大的功能，Sass 雖然出現得最先，但遠不如 LESS 普及。

 

其一開始的縮進式老版本語法，不能被大衆接受，因爲其強大的功能和 Ruby on Rails 的大力推進，仍是有不少開發者選擇了 Sass。

 

Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言，最初它是爲了配合 HAML（關於haml：http://www.bianceng.cn/web/Html/201411/46562_2.htm

一種縮進式 HTML 預編譯器）而設計的，所以有着和 HTML 同樣的縮進式風格。

 

Sass 和 SCSS 有什麼區別？

Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

1. 文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名
2. 語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)
3. 而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似（SCSS 和 CSS 寫法無差異）。簡單點說，把你現有的「.css」文件直接修改爲「.scss」便可使用。

 

「.sass」只能使用 Sass 老語法規則（縮進規則），「.scss」使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（相似 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前端自動化工具學習：http://www.imooc.com/learn/30】

常見的編譯錯誤：

最爲常見的一個錯誤就是字符編譯引發的。在Sass的編譯的過程當中，是 不支持「GBK」編碼的。因此在建立 Sass 文件時，就須要將文件編碼設置爲「utf-8」。

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

注意：全文用的是scss寫法

不一樣樣式風格的輸出方法：

在 Sass 中編譯出來的樣式風格也能夠按不一樣的樣式風格顯示。其主要包括如下幾種樣式風格：

代碼例子：

• 嵌套輸出方式 nested

           

 

• 展開輸出方式 expanded  

           

                

• 緊湊輸出方式 compact 

           

        

• 壓縮輸出方式 compressed

           

 

Sass 調試

瀏覽器支持「sourcemap」功能便可。早一點的版本，須要在編譯的時候添加「--sourcemap」  參數：

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

 

在 Sass3.3 版本之上（測試使用的版本是 3.4.7），不須要添加這個參數也能夠：

sass --watch style.scss:style.css

 

SASS沒法兼容已有的CSS代碼：sass編譯成css以後，沒法反編譯成sass了。就好比生出來塞不回去的意思