神戶的管路

我一直是 Kube 的愛用者：它簡易但靈活的架構、不預設或強加任何前提，深深吸引著對任何事都有定見的我。也或許是因為對任何事都有定見，我頗為抗拒 Bootstrap 的……不過 Kube 自己也宣稱了，它比較適合專業的前端使用，所以斟酌吧。

嘛，正片開始。

我從 Github 下載 Kube 到 rails 以後，就要開始開發了。一開始，我是用 dist/scss/kube.scss 檔案去開發。不過，常常都發現沒有任何樣式套進去，即使我加上了 class 也一樣。

翻到 Stack Overflow 的時候，發現他也有類似的問題。而得來的回答，是因為「這個 SASS 檔只有變數，自然什麼都不會編譯到」── SCSS 其實是 SASS 的一種──再回去翻 Kube 的手冊後，發現這個檔案，對我而言還不夠。

所以，我決定直接把 src 目錄的 SCSS 拿來用。但是問題又出現了：

Sass::SyntaxError......Undefined variable: "$color-black".

一開始，我對 Asset Pipeline 毫不熟悉，所以沒辦法解決。但是看到 Ruby on Rails 實戰聖經以後，才發現 require_tree . 的意思是載入所有目錄的所有預處理檔案：

實務上不喜歡用 require_tree 的方式來一次載入全部的 css 和 javascript，而是喜歡逐條 require載入，一來比較清楚，二來也可以確保 css 和 javascript 載入的順序是正確的。

瞭解以後的我，把 application.css 的 require_tree . 改成 require kube，讓 application.css 只載入搬出來的 kube.scss。然後，就成功了。 Another reference