SASS+SCSS-1 Prepros安裝+sublime插件+寫法

下載編譯器Prepros

Step1.在project檔裡新增SCSS/SASS檔案夾。
Step2.在sublime或brackets等編譯器新增，().scss檔案或().sass存在Step1設的資料夾。 Step3.在().scss檔案或().sass打的語法存檔後，CSS檔會出現對應的檔名().css，比如打text.scss或text.sass存檔後，css資料夾會自動出現text.css檔。修改text.scss或text.sass存檔後，css資料夾的text.css檔會同步修改。


Step4.我是初學者對SCSS/SASS真實差異了解不多，爬文研究結果是寫法不太一樣，SCSS寫法更像css比較不容易出差錯。SASS使用縮排、槽狀結構，不用分號;來結束屬性、不使用中括號{}關閉樣式。

【CSS】

.menu {float: right;}  .menu li { float: left; }  

.menu li a {  display: block;  color: #69CA62;  padding: 1em; text-decoration: none; }

【SCSS】.menu { float: right; 
             menu li { float: left; } 
             menu li a {  display: block;  color: #69CA62;  padding: 1em; text- 
                             decoration: none; } 
                                                           }

【SASS】使用tab鍵或兩個空白鍵來做縮排，如果縮排有誤的話編譯會出錯

.menu
  float: right         
    li
      float: left
      a
         display: block;  color: #69CA62;  padding: 1em; text-decoration: none 
         

4.安裝sublime插件:
   因為sublime裡的scss沒有預設的高亮、快速選擇輸入插件要另外安裝。安裝辦
   法為(1)先安裝Package Control 2.鍵盤ctrl+shift+p呼叫插件選擇 3.輸入Package 
   Control 4.輸入scss 安裝 5.輸入sass安裝。須把sublime關掉再重新開啟即可看到
   高亮和塊數輸入選擇。


<參考資料>30天掌握Sass語法(廖洧杰)
                      [ Alex 宅幹嘛 ] 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導