2011/04/19
轉自：http://heikezhi.com/2011/04/19/how-to-rails-3-1-coffeescript-howto/
Rails 3.1 CoffeeScript & SASS初體驗
想必大家都已經看到了Rails 3.1將內置jQuery，CoffeeScript以及SaSS的消息，那麼到底會是什麼樣呢？下面就讓我們一起來搶先體驗下吧！
首先，安裝Edge Rails
git clone git://github.com/rails/rails.git
然後，創建一個新的3.1 APP
~/rails/bin/rails new yourapp --edge
生成一個scaffold：
rails generate scaffold Link title:string url:string slug:string visits:integer
rake db:migrate
現在啓動rails server，然後通過瀏覽器打開http://localhost:3000/links/，看起來和往常沒什麼兩樣，讓我們來看看源碼，你會在HTML的頭部看到：
- <link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css">
- <script src="/assets/application.js" type="text/javascript"></script>
- <meta content="authenticity_token" name="csrf-param">
- <meta name="csrf-token" content="YNQeo1YRsjh4FtrRzpYFbiT8AzfFdfH0mqN9rkopEWg=">
注意裏面的application.js和application.css，但是同往常不一樣，你在public目錄下不會找到這兩個文件，它們去哪了呢？
打開app目錄，你會發現裏面多了一個assets目錄，在這個assets目錄下，你會看到眼熟的stylesheets目錄和javascripts目錄，沒錯，它們跑來了這裏，打開application.css，你會看到裏面只有一段註釋而沒有任何代碼：
/*
* FIXME: Introduce SCSS & Sprockets
*= require_tree .
*/
其中require_tree的作用就是告訴系統將stylesheets目錄下的所有文件和併成一個單獨的文件，很酷，不是嗎，這都要感謝Sprockets！
體驗Sass
要體驗sass，只要把scaffold.css改成scaffold.css.scss，然後刷新瀏覽器，不過你應該看不到任何變化，這是因爲scss是css的超集，所以你可以在scss文件中繼續使用css的語法而不會發生任何錯誤，scaffold.css的內容很無聊，這是rails默認生成的，讓我們試着對它做些修改：
- $background_color: #fee;
- $text_color: #000;
- body { background-color: $background_color; color: $text_color; }
現在再去看看效果吧！
體驗Coffeescript
在我寫這篇帖子的時候，application.js有些問題，裏面的一些註釋沒法正確解析，如果你遇到這個問題，把它改成下面這樣：
#= require jquery
#= require jquery_ujs
#= require_tree .
這和application.css一樣，require_tree會把javascripts目錄下的所有文件合併成一個文件，現在我們可以創建一個awesome.js.coffee文件來體驗coffeescript：
square = (x) -> x * x
alert square(10)
刷新http://localhost:3000/links/，你會得到一個煩人的js對話框，裏面顯示“100”。
好了，就是這樣，如果你對coffeescript感興趣，可以去它的官方網站瞭解更多信息。