前言：最近在學習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
Ruby：官網下載地址https://rubyinstaller.org/downloads/
也可以直接百度Ruby 然後百度下載亦可【官網速度太慢了】
安裝SASS：
//安裝如下(如mac安裝遇到權限問題需加 sudo gem install sass)
gem install sass
gem install compassruby和sass安裝成功檢測：
ruby -v
sass -v整體安裝方法參考：https://www.sass.hk/install/
2-1-2 使用命令行編譯
我準備將test.scss 編譯好的代碼輸出到style.css中
//命令行
sass test.scss style.css
html中引入的是style.css文件
2-2 更簡單的：使用koala工具編譯
2-2-1 koala安裝：
官網下載鏈接：http://koala-app.com/index-zh.html
國內：鏈接: https://pan.baidu.com/s/1kVL2xoV 密碼: 4m6p
安裝過程直接下一步下一步就行，無坑
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的軟件。然後看文檔格式的電子書。這樣也方便自己做筆記。
最最後，故事已經結束，還差個圓滿。
我~愛~大~前~端