Total Pageviews

Sunday, 30 October 2016

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

原生的 Sass 很慢

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

改用 SassC 吧!

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

1. 克隆 libsass

libsass 扮演的角色就像是 sass 的核心,所以你必須先克隆一份 libsass。
先進到你的家目錄,這樣比較好做事。
$ cd
接著克隆libsass 的倉庫。
$ git clone https://github.com/sass/libsass
然後設定 libsass 的路徑,因為你將 libsass 下載到了根目錄,所以在這裡我們也指向根目錄。
$ export SASS_LIBSASS_PATH=~/libsass/

2. 克隆sassC

sassC 則是今天的主角,當然,也請透過 git clone 來克隆一份。
$ git clone https://github.com/sass/sassc

3. 開始編譯 sassC

由於 sassC 是透過 C 語言撰寫的,你需要編譯這個程式才能在你的電腦上運作,首先進入 sassC 的目錄。
$ cd ~/sassc
接著開始編譯,這可能會花上數分鐘,請讓他跑完,不要以為是當機就重開了喔!
$ make

4. 將 sassC 納入常用指令

如果你不做這個步驟,每當你要執行 sassc 你就必須輸入完整的路徑例如 /bin/sassc指令,透過下列這個指令讓你可以直接輸入 sassc指令
$ sudo ln -s ./bin/sassc /usr/bin/sassc

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

接下來你就可以透過下列這一句,將 test.sass 編譯成 test.css 了 :D
$ sassc test.sass > test.css
项目地址:https://github.com/sass/libsass,
https://github.com/sass/sassc