在VS Code使用Sass最新配置流程

劉一筆發表於2018-11-13

原諒我標題黨了一下,事實如此。搜到的博文都是一句話帶過讓我到這個官網下載安裝包。(安裝包連結已放到文末)嘗試數個版本之後仍然是下載一半失效,可能我梯子質量不行吧。此外還很讓人懵逼的一點是:在搜尋引擎搜sass得到的sass.hk網站的指導是錯誤的...“gem sources -a https://ruby.taobao.org/”,在命令列輸入這句後就直接報錯,抱歉忘了截圖。大意是命令錯誤,你要不試試這個連結:https://gems.ruby-china.com/。開啟看之後才知道了安裝sass的正確姿勢。貌似不對,當時命令列給的還是https://gems.ruby-china.org,由於備案的問題還是得用.com的域名。這就是我用"最新"二字的原因,technology changes,you must catch up with it。

下面走一遍完整的安裝使用流程。

我用的是sass,為啥要裝Ruby?因為sass基於Ruby語言開發,因此安裝sass需要安裝Ruby。mac下自帶Ruby無需安裝。

安裝包下載好之後,點選安裝出現如下介面。在VS Code使用Sass最新配置流程

可以不用勾選744多m的那個。此外,有一個需要勾選的,"add ruby executables to your PATH",(貌似現在都預設勾選了)用於將ruby新增到系統變數。安裝完成之後,出現對話方塊詢問是不是要直接開啟命令列安裝一些東西,也不勾選,然後finished。我第一遍安裝的時候就兩個都夠了,然後在命令列下載了幾G的安裝包...

完事後在開始欄中點選"Start Command Prompt With Ruby",就進入你想要的黑框框。

在VS Code使用Sass最新配置流程

由於牆的存在,我們先設定下安裝東西的源以便加快速度。

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
# 此處是 l(list),不是1
https://gems.ruby-china.com
# 確保只有 gems.ruby-china.com複製程式碼

然後安裝最新版本的Sass和Compass

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

在每一個安裝過程中,你都會看到如下輸出:

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed複製程式碼

安裝完成之後,你應該通過執行下面的命令來確認應用已經正確地安裝到了電腦中:

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass複製程式碼

如下sass常用更新、檢視版本、sass命令幫助等命令:

//更新sass
gem update sass

//檢視sass版本
sass -v

//檢視sass幫助
sass -h複製程式碼

好,sass已經安裝好了。怎麼用?

這裡我們只討論在VS Code中使用,編寫好sass程式碼由於瀏覽器並不能識別該程式碼。所以我們需要藉助工具幫我們把sass轉換成瀏覽器認識的css語言。

在VS Code外掛欄中搜尋sass,就可以看到sass相關的外掛,我們需要的編譯的工具。這裡以Easy Sass為例。安裝完成後外掛已經幫你配置好了。但有時或許我們不需要編譯成兩種格式,那隻需要把你的配置寫在右邊就可以覆蓋左邊的配置了。此外還有編譯完成之後檔案的存放路徑,一般我們的專案都會有css目錄,所以你可以把編譯後的檔案存放路徑設定為 ./css/。但這裡應該是要自己現在資料夾建立該目錄,不然他會提示你該目錄不存在。

補充一下後面實際使用時遇到的坑,當sass檔案和css檔案不在一個目錄時,引入圖片等檔案路徑需要以css所在的檔案路徑為準。

在VS Code使用Sass最新配置流程


完事之後,就可以愉快的使用sass了。

windows安裝檔案:連結: share.weiyun.com/5Je7HEf (密碼:MRag)

注:文中關於用命令安裝sass的部分引用至sass.hk網站。


相關文章