前言：最近在學習sass
眾所周知，sass寫出的程式碼編譯後生成XX.css的檔案才能被html引入使用
接下來講下sass的使用

一.sass使用

1. 建一個資料夾，檔案下新建sass檔案：XXX.SCSS

【注意sass檔案的字尾是.scss而不是sass】我就被坑了幾次。

編譯器我使用的是VScode 介面清爽好看

2. 編譯scss檔案->輸出XX.CSS

編譯scss可以使用命令列編譯也可以使用視覺化的軟體介面操作編譯，這裡先講第一種方法。
命令列編譯 sass input.scss output.css
這裡的意思就是編譯input.scss檔案然後輸出output.css這個檔案。
不過要想在命令列環境下使用sass命令，需要先安裝sass，而sass基於Ruby語言開發而成，因此安裝sass前需要安裝Ruby

2-1 方法一 命令列編譯

2-1-1 安裝Ruby 和sass

//安裝如下(如mac安裝遇到許可權問題需加 sudo gem install sass)
gem install sass
gem install compass

ruby和sass安裝成功檢測：

ruby -v
sass -v

2-1-2 使用命令列編譯

我準備將test.scss 編譯好的程式碼輸出到style.css中

//命令列
sass test.scss style.css

html中引入的是style.css檔案

2-2 更簡單的：使用koala工具編譯

2-2-1 koala安裝：

2-2-2 介面介紹

+號匯入專案【即帶有scss的資料夾】
輸出方式有壓縮的css程式碼等，這裡選擇的是非壓縮的。
點中間的編寫可以設定輸出css的檔案
設定好後執行編譯即可。

對了我這個是中文的，你也可以自己設定為英文

以上講了怎麼使用sass，關於sass語法的強大性這裡不再贅述，使用sass編寫css檔案可以大大加快開發速度，如果說css是一門非程式語言，那麼sass就是一門較規範的程式語言，可以巢狀可以for迴圈，也有繼承，還可以引入其他的程式碼塊等等。
接下來講下怎麼結合谷歌瀏覽器除錯sass
為什麼我想在谷歌裡面除錯呢？
試想一下，如果我可以在瀏覽器的控制檯直接寫css，然後頁面就會跟著改變，而且在網頁控制檯輸入的程式碼可以同步到本地的css檔案，即控制檯寫入的程式碼會儲存到本地css中，不會隨著瀏覽器的關閉或者頁面的重新整理而消失不見。
開著網頁視窗就能寫css程式碼，不用再在編譯器和網頁中來回切換【有雙屏的同志請當我沒說：）】
豈不樂哉？

三.谷歌瀏覽器除錯sass

1.準備工作1.0

demo程式碼結構目錄：
—css
——–test.scss
——–style.css
—demo.html

2.準備工作2.0

1.
找到你的谷歌外掛，瀏覽器位址列輸入 chrome://flags/
ctrl + F 搜尋 developer
啟用

2.
在demo.html 頁面，開啟debug模式，也就是F12
然後開啟設定，我們需要做sass除錯的相關設定

設定裡面，勾選 Enable css source maps

3.終端開啟監聽

命令列

sass --watch test.scss:style.css

4.chrome除錯

開啟demo.html頁面，F12，然後在source裡面找到css資料夾：
右鍵-> Add Folder to workspace
然後選擇你在本地的那個css資料夾

這個時候瀏覽器上方有個彈框，選擇允許

這時介面是這個樣子：

5.chrome改變樣式

在網頁控制檯test.sass檔案中修改程式碼。
這裡我簡單地將背景顏色改為了藍色。
重新整理頁面就如下圖所示。

這不是神奇的，神奇的地方在於，
此刻去編譯器檢視，相應的程式碼已經各歸其位了。

參考文件：sass安裝以及安裝後谷歌除錯編譯的解決方案

四.總結

1.關於瀏覽器的開發者功能即很多除錯技巧自己都不知道，這是一塊短板。但是現在我知道了有這樣一塊未知領域裡面藏有許多寶藏，那麼我是心之往之神之向之，從而願意肝腦塗地上下而求索之。所以加油吧！每一次新知都是挑戰，接住了就是成長，接不住【也得接著，只是成長的較晚而已。

2.學習一門新的東西的學習路徑

我個人一般說來 看文件->敲demo->實戰
例如這段時間使用類的思想重構vue程式碼，那麼我就要先去了解js的面向物件程式設計
學習路徑：
看書
《JavaScript面向物件程式設計指南》
+《JavaScript高階程式設計(第3版)》的第六、七章
-> 阮一峰的js面向物件部落格關於前兩本書面向物件知識的總結
輔助學習
阮一峰的ES6入門
看書的時候注意兩點：
1.只看經典。特別是一些國外的書，作者總是由淺入深循序漸進，而且傳授給你的不是一個知識的灌輸，而是思想的交流。這點很重要，比如js面向物件程式設計指南這本書，他從人們最容易想到的方法一步一步改進，然後提出多個解決 辦法。每每閱讀此類書感覺就是在給自己智商“加鹽”。。。

2.一定要邊看邊敲。 很多時候你看的時候看懂了但是完全自己敲的時候不一定就完全會，而且自己動手的過程本身也是在鞏固知識。其次溫故而知新，與我們學英語記單詞一樣，有個複習週期的問題。

還有就是個人喜好的問題了，我比較喜歡在電腦上看電子版的書。。因為我覺得實體的書身不帶來駛不帶去的。沒有電子書方便，隨時隨地電腦手機都可以檢視。至於做筆記的問題，網上的電子書大部分都是pdf格式，這裡建議可以下個pdf轉word的軟體。然後看文件格式的電子書。這樣也方便自己做筆記。

最最後，故事已經結束，還差個圓滿。
我~愛~大~前~端