sass

Scss旅程(3) – 安裝sass/compass-windows版

由於Windows(win7沒自帶,win10看來有自帶?)沒有自帶Ruby,因此在Windows上安裝Sass和compass前,得先安裝Ruby才行。

如果不確定電腦裡是否有安裝Ruby,可以打開「命令提示字元(搜尋打cmd)」,輸入「ruby -v」,如果有出現版本號,就是有安裝。

如果出現「ruby 不是內部或外部命令」,就表示沒有安裝Ruby,乖乖安裝吧( ゚∀゚)!

1.前置資訊

系統:Windows7 x64

因compass和sass都是用ruby開發,因此要使用它們就需要ruby。windows系統要安裝ruby需要使用RubyInstaller,可以到這邊下載:RubyInstaller下載網站

這次示範的RubyInstaller版本是2.3.0(x64),各位看到這篇文章時應該已經有更新的版本了,建議安裝最新版本喔。

2.安裝Ruby

首先至RubyInstaller download下載RubyInstaller,下載完接著安裝。

大抵跟著安裝步驟一步一步往下就好(也沒幾步),在選擇安裝資料夾位置時,記得勾選下方選項的「Add Ruby executables to your PATH」(版本2.5是預設勾選),讓它自動把ruby路徑加到環境變數裡,以免發生裝好了ruby卻無法使用的狀況。

假設安裝時忘記勾它也沒關係,請找到ruby的安裝位置,通常會在「C:\Program Files\Ruby23-x64」,Ruby後面接的數字視安裝版本而定。找到後請點開它,找「bin」這個資料夾,將它的絕對路徑加入使用者變數的「Path」裡。

所以使用者變數Path裡就會多一條「C:\Program Files\Ruby23-x64\bin」(對,安裝程式自動加的不是加在系統變數,而是使用者變數)。

安裝好後,打開命令提示字元,輸入「ruby -v」,如果有出現版本號,就是安裝成功了。

3.安裝Compass+Sass

「不是要安裝Sass嗎?為什麼要先裝Compass?」

當然要先裝Sass也行,只是捷徑不走有點對不起自己(O

其實是安裝compass時,如果電腦沒有安裝Sass的話就會一起安裝,省下了手動安裝Sass這一步。

安裝前需要先進行更新。即便是剛安裝好ruby也請執行一次更新,這將會將RubyGems更新至最新版。

  1. > gem update –system

更新完畢後,可以開始安裝Compass啦。

  1. > gem install compass

剛按下Enter時電腦可能會停頓一下,就是什麼反應都沒有,這時不用慌也不用及更不用亂按,等待就行了。

windows-compass-install-01
[圖一]安裝compass
安裝完畢後,可以在命令提示字元上輸入「compass -v」,如果有出現版本資訊,表示安裝成功。

windows-compass-install-02
[圖二]檢視compass版本
到這邊就可以使用Sass+compass了,若不想裝compass只想裝Sass呢?當然可以。

4.只安裝Sass

如果只想要安裝Sass的話也很簡單,確定安裝好ruby,也確定使用的ruby跟gem都是最新版後,別急著關命令提示字元,直接進行安裝:

  1. > gem install sass

剛按下Enter時電腦可能會停頓一下,就是什麼反應都沒有,這時不用慌也不用及更不用亂按,等待就行了。

windows-sass-install-01
[圖三]安裝sass
windows-sass-install-02
[圖四]安裝sass中
安裝完後可以輸入以下的命令,如出現版本號就表示安裝成功

  1. > sass -v

windows-sass-install-03
[圖五]sass版本號
到這邊Sass的安裝就完成了。

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.