Rails 3.1 CoffeeScript & SASS初体验

 By YUANYI | Published: 2011/04/19

转自：http://heikezhi.com/2011/04/19/how-to-rails-3-1-coffeescript-howto/

Rails 3.1 CoffeeScript & SASS初体验

By  YUANYI  |  Published:  2011/04/19

想必大家都已经看到了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感兴趣，可以去它的官方网站了解更多信息。