在 Linux 上安裝 Sassc,效能比原生 Ruby Sass 快十倍!

原生的 Ruby Sass 確實慢到一個極致,如果你只編譯幾個 sass 是感受不到的,而我最近在編譯像 Tocas UI 這樣的大型 CSS 專案,發現到當你更改一個 sass 檔案,你需要等待至少六秒以上,整個 css 編譯才會結束,就算修改的只是一個 display: none 也要等六秒才會有結果,這些時間都可以來做三明治了。

改用 SassC 吧!

sassC 是由 C 撰寫的 Sass,所以相較原本的 Ruby Sass,sassC 快了至少十倍之多,意思是你不需要等六秒,只要一秒不到即可完成編譯!

安裝前置準備

你需要先有 Git,你可以在這篇教學中看到如何安裝


1. 複製 libsass

libsass 扮演的角色就像是 sass 的核心,所以你必須先複製一份 libsass。

先進到你的根目錄,這樣比較好做事。

$ cd /

接著複製 libsass 的倉庫到本地端電腦。

$ git clone https://github.com/sass/libsass.git

然後設定 libsass 的路徑,因為你將 libsass 下載到了根目錄,所以在這裡我們也指向根目錄。

$ export SASS_LIBSASS_PATH=/libsass/

2. 複製 sassC 到本地端安裝

sassC 則是今天的主角,當然,也請透過 git clone 來複製一份到本地電腦。

$ git clone https://github.com/sass/sassc.git

3. 開始編譯 sassC

由於 sassC 是透過 C 語言撰寫的,你需要編譯這個程式才能在你的電腦上運作,首先進入 sassC 的目錄。

$ cd ./sassc

接著開始編譯,這可能會花上數分鐘,請讓他跑完,不要以為是當機就重開了喔!

$ make

4. 將 sassC 納入常用指令

如果你不做這個步驟,每當你要執行 sassc 你就必須輸入一整個路徑例如 /bin/sassc [指令],透過下列這個指令讓你可以直接輸入 sassc [指令]

$ sudo ln ./bin/sassc /usr/bin/sassc

完成!透過 sassC 編譯一個 Sass 吧!

接下來你就可以透過下列這一句,將 test.sass 編譯成 test.css 了 :D

$ sassc test.sass > test.css