SASS環境搭建及HBuilder中sass預編譯配置

---------------------------------Ruby環境安裝--------------------------------

至於爲何要安裝ruby環境請移步：https://www.zhihu.com/question/33811497 

　　1.先下載一個ruby的安裝文件：文件名能夠搜索：rubyinstaller-2.3.1-x64 

如圖：

　　2.建議裝到c盤（這裏記住你的安裝地址，後期有用）

　　3.勾選中間的path

 

而後就一路"南下」，直到看到finish

　　4.win7系統的在左下角輸入start，定位到Start Command Prompt with Ruby面板並調出

 

5.命令行裏輸入：ruby -v  

查看是否安裝成功（注意ruby和橫線之間有個空格，否則不行。也可直接複製文中文字，而後右擊命令行來粘貼，直接cc+cv不行）

如圖，出現版本號就八九不離十了、、、

 

6.命令行輸入： gem install sass  來安裝sass

報了個亂七八糟的錯

 拓展：GEM——Ruby環境內的一個包管理器，因此這裏都是gem這三個字母開頭，就好像在nodejs的環境下，有一個NPM的包管理工具同樣，

後來學gulp安裝了node以後，老是用npm來打頭執行命令，忽然再去學習compass，有點蒙開始用gem寫，後來才搞清兩者的關係，這裏附筆。

7.（沒報錯就跳過步驟7,8,9）

命令行輸入：gem sources --remove https://rubygems.org/

用來卸載鏡像

提示：

 

8.再安裝鏡像

（這裏不要罵我有毛病，卸了又裝，我當時作這一步的時候確實***過，哈哈哈。至於卸了又裝是有緣由的，咱們以前那個是國外服務器的，如今裝的是淘寶鏡像，

後來淘寶鏡像沒用，師傅給我找了下邊這個地址。在這裏感激師傅，也祝師傅一路走好，，，，，，，，，，，哈哈哈，不要多想哈，我說的是前程！！！）

命令行輸入：gem sources -a http://gems.ruby-china.org/

提示：

 2018-06-19  17:55:06補充

若是這裏仍是沒有成功，報錯以下圖：

能夠臨時修改下，隨機應變，如我這裏修改成：

最後也成功了

9.再次安裝sass

命令行裏輸入：gem install sass

 

100%完成了

 

其實接下來就能夠用命令行加上--watch來監測sass更新並實時編譯成css了，若是非懶得打那一行幾個小字母，就進行下一個階段吧。

------------------------------------------------------HBuilder 中  預編譯器配置------------------------------------------------------

1.HBuilder中，「工具」-「預編譯器配置」

2.新建規則

3.填寫信息，分別是：

.sass,.scss

D:\Ruby23-x64\bin\sass.bat或C盤路徑，看你前期ruby裝到哪裏

–no-cache %FileName% ../css/%FileBaseName%.css或–no-cache %FileName% ../css/%FileBaseName%.css –style compact 

（後邊紅字：是編譯出來的風格。。。）

 

------------------------------------------------------其餘拓展教程文連接------------------------------------------------------

HBuilder中配置預編輯器

Sass安裝

 其餘相關文章

 CSS預處理器——Sass、LESS和Stylus實踐【未刪減版】http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

2017-07-07  19:27:10

 

 

-------------------------------------------------------------------------------------正經分割線！！！--------------------------------------------------------------------------------------------------------------------------

聲明：

　　請尊重博客園原創精神，轉載或使用圖片請註明：

　　博主：xing.org1^

　　出處：http://www.cnblogs.com/padding1015/