Scss to Stylus

其實之前看到 Stylus 出來後，就還蠻想嘗試看看了。只是說 Stylus 和 Scss 的功能差異不像當初 LESS 和 Scss 的差異那麼大， Scss 已經用習慣了以後，要跳槽還真需要一點額外的動力。

在過年前幾年，工作夥伴提到開發環境裡 Sass 是唯一要用到 Ruby 的因素，要是沒有就好了。再加上 Sass compile 的速度還真是慢，我每次都要微等一下再 reload browser 才能看到結果。所以合起來就有充分的動力來換了。

然後公司網站也沒有用 Compass，要轉換的阻力就小很多了。於是我就利用今年過年有空的時候，把公司的 Scss 轉成 Stylus。 本來以為會很快，幾個 search & replace 就好了，沒想到枝節還蠻多的，再加上一些 Stylus 的錯誤訊息真是不知道在表達什麼，試很久才知道問題在哪裡。不過看不懂的錯誤訊息我覺得在直接寫 Stylus 時應該不會發生，所以才沒有被處理到。

Stylus 的 variable interpolation （用 {} 包起來）也比較弱，只支援在 selector 裡面使用，像是

-webkit-{prop} : args
-moz-{prop} : args
{prop} : args

在其他地方就要改用最一般的字串相加（ + ）了。

還有一些小差異不會報錯，要自己看CSS的diff 抓出來。像是原本 Scss 的變數是用 $color: #fff 來表示，Stylus 是比較像程式語言的 color = #fff ，但是 Scss 的表示方式在 Stylus 也不是錯誤，而是當作普通的樣式直接放過去。

在轉成 Stylus 之後，我也順便引進了 Autoprefixer 幫我自動加 vendor prefix，這也是我聽到很久一直想用的東西。也再次令人感到前端的進步速度真的很快，前不久用 Compass 來幫忙處理 vendor prefix 還很潮，現在一下就過時了，改用 postprocessor 來處理會更好。

新年新語言新流程，感覺還蠻不錯的！