1. 程式人生 > >window環境下Ruby和Sass的最新安裝步驟詳解

window環境下Ruby和Sass的最新安裝步驟詳解

步驟一:

進入ruby的官網https://rubyinstaller.org/,介面展示如下:點選Download,進入下載頁面

步驟二:根據自己的電腦配置選擇相應的ruby安裝包進行下載,我的電腦是win7,64位的,根據右側英文文件第一項的推薦,選擇了=》Ruby+Devkit2.5.3-1(x64)

步驟三:Ruby 安裝檔案下載好後,可以按應用軟體安裝步驟進行安裝 Ruby。在安裝過程中,個人建議將其安裝在 C 盤下,在安裝過程中選擇“Add Ruby executables to your PATH”(不選中,就會出現編譯時找不到Ruby環境的情況)

 

步驟四:安裝完成之後, 在“開始”中輸入cmd調出命令控制行工具,輸入ruby -v 驗證是否成功安裝ruby,安裝成功有ruby版本號

步驟五:修改ruby軟體包的sources,這是由於國內網路的原因,會導致rubygems.org放在亞馬遜伺服器的資原始檔經常出現間斷性訪問不到,將其改為國內映象版。

(1)移除如rubygems.org,指令及結果如下:

跟換rubygems的sources:網上很多資源都說使用國內淘寶的映象版本,然而經多次嘗試會報以下錯誤提示:找不到資源,後面括號中跟了重定向的地址,跟換地址後仍然報錯.

(2)跟換rubygems的sources,使用最新域名

https://gems.ruby-china.com/,進入ruby China官網

 由於前面已經移除了rubygems.org,這裡使用官網上給出指令的前半部分的新增指令操作即可:

步驟六:安裝Sass

 至此,sass的執行環境ruby安裝完成,Sass也成功安裝。

補充指令:

(1)更新ruby程式,gem update

(2)安裝指定版本的程式 gem install sass --version=3.3

(3)列出本地安裝的所有ruby程式包 gem list

(4)刪除指定版本的sass gem uninstall sass --version=3.3.0

(5)整個刪除sass  gem uninstall sass

簡單使用,將sass檔案編譯成css檔案

(1)使用mkdir -p learnsasscli 建立learnsasscli資料夾,然後進入到該資料夾中,在其中通過vim編輯器,建立一個main.scss檔案,在vim 編輯器中,i是插入指令,使用ESC+":"+"wq"是儲存退出指令

 

 

 

 (2)使用sass指令“sass main.scss main.css”將.scss檔案轉換為.css檔案,通過"ll"指令,列出該檔案下面的所有檔案,可以看到main.scss檔案已經通過main.css.map對映到了main.css檔案中,然後通過vim main.css指令進入檢視生成的css文字

 

 (3)以上就是編譯轉換過程,最終生成的檔案如下: