lilu (李路)

出 Oculus Rift 一台，99 成新

lilu — Wed, 18 Dec 2013 11:29:53 +0800

介绍见这里

包装配件齐全，海关运单都有，佩戴总时间不超过 2 小时，价格 2100

联系邮箱 lilu.life@gmail.com，qq 1735680798，我在深圳，可见面交易

[深圳] Knewone.com 招聘 Ruby/Javascript/iOS 程序员

lilu — Fri, 07 Jun 2013 14:31:43 +0800

原帖来自这里

knewone作为一个lean startup的小团队，我们一直希望能保持小的规模，但是今天，我们不得不需要更多的新鲜血液来完成更多的事情。

如果你是第一次知道 knewone，请先来这里看一下，翻翻好玩的东西，如果你对这个网站及其上面的产品完全不感兴趣，下面就不用读了，请自行左上：）

knewone 是一个很酷的公司，所以希望你也是很酷的。

喜欢买各种新奇的，稀奇古怪的东西，并乐此不疲地推荐给别人
爱折腾，为了自己的爱好，生命不息，折腾不止
喜欢与人交流，无论是现实中还是网络上
喜欢交朋友，喜欢吃，喜欢到处逛
用 Mac，当然 PC 装 Linux/BSD 也很好

对于后端技术人员来说，以下项目可以大大加分：

在 Github 上活跃
玩 Arduino/Rasberry Pi 等开源硬件
熟悉一种或几种非主流语言，比如：Lisp/Haskell/Scheme/Prolog/Erlang/Lua/Scala/Clojure
精通 Javascript 和 CSS
会编写 Shell 脚本

对于前端来说则是这些 (请注意，这里前后端真的没有写反)：

在 Github 上活跃
玩 Arduino/Rasberry Pi 等开源硬件
熟悉一种或几种主流后端动态语言，比如 Ruby/Python/Perl/Node.js
懂得设计，熟悉字体和版式，会 PS，AI，Corel Draw，Final Cut 尤佳
精通一种或几种客户端 MVC 库，如 Backbone/Angular/Ember/KnockoutJS/YUI/Batman

对于 ios 开发来说则是这样

在 Github 上活跃
玩 Arduino/Rasberry Pi 等开源硬件
懂得设计，熟悉字体和版式
精通 Http 及 Oauth 等 api 授权机制

我们能为你提供什么：

6k－20k，以及 options
各种新鲜好玩儿的东西
和各种有意思的人一起工作
舒服的工作环境
你可以骑车来上班，我们在华侨城，绿树成荫，公司提供淋浴
阳台上会种一些菜，午餐由我们提供
弹性工作时间，不用赶着点儿来上班
女生每月可享受两天额外的休假
如果你的工作需要长期坐在那里，可提供 Herman Miller Aeron 椅子
可以带宠物上班，这里有一只喜欢白富美的雪纳瑞 Cookie

联系方式：

lilu@knewone.com

邮件内容请包含但不限于

你的个人经历或工作背景 (请勿发 word 格式）
你的 Blog/Twitter/Github/微博/豆瓣等账号，方便我们进一步了解你

希望能有机会请你喝杯咖啡！

Herman Miller Aeron @ Knewone (广告)

lilu — Sat, 04 May 2013 21:10:25 +0800

此贴纯属广告，版主刀下留人。。。

Knewone 又新订了 10 把 Aeron，椅子的具体介绍看这里

型号都是 2B 和 3B，优先咱们 ruby china 的同学，有需要的人请回帖或联系我

OpenSSL Errors, Ruby 2.0 and Rails – Certificate Verify Failed

lilu — Thu, 28 Mar 2013 14:59:25 +0800

升级到 Ruby 2.0 之后，我在 Rails 开发中遇到了这个问题，不过，很快就在网上看到了问题的原因和解决方法，以下适用于 Mac OS X，相信 linux 下原理一致

来自 RailsAPP

Are you getting an error “OpenSSL certificate verify failed” with Ruby?

Or an error “Gem::RemoteFetcher::FetchError: SSL_connect returned=1 errno=0”?

You may be seeing Ruby problems with OpenSSL because of conflicts with older versions of OpenSSL or outdated certificate files.

Here are suggestions.

Errors with Ruby 2.0

Check RubyGems Version

If you get OpenSSL errors with Ruby 2.0, make sure you are using RubyGems 2.0.3 or newer:

$ gem -v

Use gem update --system to upgrade the RubyGems system gem if necessary

Old Versions of OpenSSL

The version of OpenSSL that comes with Mac OS X 10.8 is too old for Ruby 2.0. You need to install a newer one with RVM or Homebrew.

You should have OpenSSL 1.0.1e or newer installed in your environment:

$ openssl version

If you are using RVM, the newest version of RVM will install OpenSSL automatically. See the article Installing Rails. This may be the easiest solution.

You can also install Homebrew and try this:

$ brew update
$ brew install openssl
$ brew link openssl --force
$ brew install curl-ca-bundle

If OpenSSL is up to date, you may be having problems with outdated certificate files.

James Tucker (raggi) has released a simple script (openssl-osx-ca) that uses Homebrew to update the OpenSSL security certificates found in the Mac OS X Keychain. The script replaces the outdated OpenSSL security certificates on your Mac with new certificates from Mozilla.org

$ brew tap raggi/ale
$ brew install openssl-osx-ca

Knewone: 从程序员视角看 Lean Startup (CSDN 线下活动&讲义)

lilu — Wed, 20 Mar 2013 10:07:59 +0800

一月份的时候，和 @xiaolai 一起用 lean startup 的方法做了knewone.com ，那最初的十几天不是一段很长的时间，但有着未曾经历过的密度和质量，所以借着这次 CSDN 办线下活动的机会，非常想把我们这次创业过程中的经验得失分享给各位

时间：3 月 26 日的晚上 6 点

地点：北京福泰酒店公寓一层纽约厅

线上报名

讲义在这里

等着大家

Rails is omakase - 中文版

lilu — Sat, 05 Jan 2013 23:28:41 +0800

原作者是 DAVID HEINEMEIER HANSSON

Omakase：お任せ，是源起日本頂級壽司餐館的點餐方式，無論是食材，菜品，還是用餐順序，完全由厨師來决定，價格往往非常高昂

現在的世界哪哪都是那種"點菜"式的軟件，您要想吃頓飯，且得仔細看遍菜單，再琢磨出來今兒到底想吃嘛：來個我習慣的 ORM 開開胃，然後是我吃了好幾年的模板語言，最後來個路由庫當點心。於是，你得提前知道什麼合你的口，而且一旦你吃過覺得還不太壞，你會一直吃同样的東西，甚至於不知道這世界上還有別的什麼東西可吃。可悲的是，我們現在就是這麼消費軟件的。

但 Rails 不是這样的，Rails 是 omakase: 由厨師們挑選出材料，設計 api，然後为你排列使用順序--完全根據他們的主觀來决定，什麼才是一套美味的全棧框架。所以，给你呈上的大餐往往是個人色彩鮮明的，而且經常有點詭異離奇，保證不可能老少皆宜。

不過，也會有例外的時候，比如主顧們有時對有些東西過敏，所以我們也允許可接受範圍內的調整。你吃了 test/unit 會長疹子？沒關系，用 rspec 替代吧。你完全不能攝入咖啡因？(coffeescript)，好，從 Gemfile 裏幹掉那一行。

其實，我們的菜單還接受建議呢，親！不管是誰提出來的，好主意就是好主意。不過你要記得，友好的建議和來挑事的食客，還是有區別的。比如我有時候得做出這样的回复："嘿，抱歉我們這裏沒有熱狗，這玩意真的不适合放在我們的壽司菜單上，我知道你不懂鰻魚是啥，不過我們選擇它是有原因的，無論如何，感謝你的建議！"。如果爭論只是關於菜單的，那麼往往會到此为止。

可是這幫人還沒完了，他們繼續嚷嚷："可是我真的討厭鰻魚！它在糟蹋我的味蕾！趕緊拿走！！！！！"。Ok，坐下消停會兒

我們，好吧，我，作为 Rails 這頓 omakase 體驗的主厨，通常會根據我們千錘百煉的味覺和喜好來决定菜色。我可是在這兒幹了 10 個年頭了，耗在 Rails 上的時間估計得有上萬小時，這意味着我的品位應該不俗，當然，不一定适合你。

我們可以爭執什麼才算是"好吃"，不過一般的結論是"不愛吃就別吃"，特別是對於那些第一次吃壽司的顧客。你的經驗越少，你對我們越沒有幫助，你的論點越沒有份量，尤其是你的表達方式還如此粗魯無禮和讓人反感。

這貌似惹怒了一些人，他們會說："我的意見和你的一样有價值！"。錯，完全不對。你的意見，只對你有價值，對於我們为餐館設計的菜單來說嘛用沒有。喔，對，你還有用腳投票的權利，如果菜單上的東西讓你惡心，那你還在我們這兒瞎起什麼哄，那邊就有個門看見沒有？出去的時候別给我甩門就好。

如果你真的想對 Rails 的菜單設計做出點影響，哥們兒，你得努力的工作。我們這個禮拜剛剛往 Rails 核心組裏加了三個人，他們要麼接受命令打雜，要麼是"我剛試着做了個新菜式，請嘗嘗看好不好吃？"的謙虛學徒態度。從來沒有人，能夠僅僅在 Github 上寫幾條評論，發發 CoffeeScript 的牢騷，就能夠影響 Rails。

既然這種抱怨是如此的浪費人生和沒有意義，那为什麼有些人還沉迷於此呢？我得出的一個不成熟的結論是：這样會讓這些人看起來在社區中活躍。他們做不到日复一日的艱辛努力，就在有機會的時候跳出來試圖留下些亂糟糟的塗鴉證明自己的存在意義：耶！我盡力了！我表態了！我幹倒了...恩...Turbolinks? 等等，我們這個禮拜要搞的好像是 CoffeeScript？不對，是 Bundler? 草，管他的，反正幹倒什麼就對了！耶!!!

今天說得夠多的了，我們還是得往前看。其實我也不是全都喜歡現在我們提供的菜品，另外還有些材料我實在不了解，所以說不出來我为什麼沒有選擇她們。這種時候，也許我會讓我的厨師們來做一些决定。的確，不可能每件事，每样東西都是我的喜好，但是，想讓全世界都知道鰻魚有多好吃，這背後真的沒有，也不需要什麼陰謀。

By David Heinemeier Hansson on Dec 27, 2012

Translated by lilu

Omniauth，微博与 CookieOverflow

lilu — Fri, 14 Dec 2012 11:34:55 +0800

在为http://meejian.comdevise和omniauth做微博登录时，犯了一个错误，这里分享一下：用

有时候，你需要将 omniauth 返回的 env["omniauth.auth"] 的信息记录下来，然后在用户真正注册的时候把这些信息填充进去，这样用户就不用再填写一些头像姓名之类的信息了

可以使用 session 记录，然后在 user model 里重载 devise 提供的new_with_session方法：

class << self
    def new_with_session(params, session)
      super.tap do |user|
        if data = session["devise.omniauth"]
          user.merge_from_omniauth! data
        end
      end
    end
  end

  def merge_from_omniauth!(data)
    auths << Auth.from_omniauth(data)
    self.name ||= data[:info][:name]
    self.location = data[:info][:location]
    self.description = data[:info][:description]
    self.remote_avatar_url = data[:info][:image]
  end

但是，如果把env["omniauth.auth"]的信息全部记录到session["devise.omniauth"]中，只要是新浪微博做 provider，那么就会出现ActionDispatch::Cookies::CookieOverflow的错误

原因是微博返回的信息中有一个:extra字段，它相当地大，所以造成了 cookie 的溢出 (因为 cookie 只能存有限的数据，通常浏览器是 4k）

解决方法有两个：

不用 cookie 存储 session 数据，改用数据库或别的内存存储方案
session["devise.omniauth"] = request.env["omniauth.auth"].except(:extra)

顺带一提，除了微博，twitter 的 oauth 返回数据也有这个很大的:extra 字段

关于电脑配置的访谈，求参与

lilu — Thu, 13 Dec 2012 16:16:22 +0800

http://meejian.com/topics/ok-computer/interviews/50c980ebe84a446470000010

这是在最近做的网站上发的我自己的硬件配置，也希望大家掺和掺和，写写自己心仪的好东西

推荐 mongoid 下的 friendly_id: mongoid-slug

lilu — Mon, 08 Oct 2012 18:17:40 +0800

mongoid-slug

已升级为 1.0.0，简便好用

class Book
  include Mongoid::Document
  include Mongoid::Slug

  field :title
  slug :title
end

于是 book resource 的 url 可以非常美好， "books/a-thousand-plateaus"

更难能可贵的是对中文支持不错，比如book.title="ruby指南"

产生的 url，“books/rubyzhi-nan"

这是基于字符串加强 gem stringex 的

如果拼音重复了，会在后面自动加序数，比如“books/rubyzhi-nan-1"

[北京] Ruby 主题性活动建议

lilu — Thu, 06 Sep 2012 11:35:32 +0800

参加了几次北京社区的 ruby 活动，目前有两种活动形式

主题演讲
自由交流讨论

这两种各有利弊，前者缺少交流，每次都是大家在台上演讲，讲完就散，而后者又比较松散，难以沉淀下有价值的参考资料

所以我建议之后每次 ruby 活动，除了演讲和交流之外，可以有且仅有一个主题，大家就此主题展开有组织的讨论，也比较容易留下对社区有价值的记录

试举一些主题的例子：

如何做测试，测试的粒度控制
生产环境部署及服务器选用
前端框架的比较及经验
如何做后台管理
如何做数据统计
如何配置最适合的开发环境

肯定还有很多，希望各位提出自己愿意组织主持，或者参加讨论的主题

机械键盘 HKKB Pro 2 vs Others?

lilu — Tue, 04 Sep 2012 13:42:58 +0800

用了四年的 Cherry 茶轴 G80-3000 不幸出问题了，还是最要命的 Caps Lock

现在只好去找个新键盘，大概扫了一眼，有如下选择

HKKB PRO 2
Filco 圣手 2 忍者青/红/茶轴
Das Keyboard Model S Pro

有用过的人谈谈体会吗？我需要键盘在 Mac 和 Linux 下都能正常工作，大部分时间使用 Emacs

Kent Beck 谈测试粒度

lilu — Tue, 04 Sep 2012 09:47:52 +0800

不知道 kent beck 是谁的人请自行 wiki

http://stackoverflow.com/questions/153234/how-deep-are-your-unit-tests

看第一个答案，我觉得关于是否应该追求代码覆盖率的争论该告一段落了

我目前的推荐方案是：

复杂和容易出错的 model 方法做 unit test
让 controller 尽可能 skinny，不做测试，除非是一些权限相关和有破坏性的
客户端用 jasmine 做 unit test
为你的产品最主要的故事流程做 integration test，用 capybara 或什么都成，但不应该超过三个

Rails 学习推荐书籍列表

lilu — Mon, 03 Sep 2012 13:17:06 +0800

来自与我在北京 ruby 活动上组织新手学习讨论的一些结果，我想读书是最有效最全面和最扎实的吸取知识的方式，不过市场上滥竽充数的书籍实在很多，对于新手来说，怎样用有限的时间读最合适的书，是很重要的。

所以，我基于自己读过的一些书和实践经验，总结了一下在目前进行 Ruby on Rails 学习的推荐读物，基本上纯粹是个人主观观点，欢迎各位高手抨击和补充

Beginning

起点阶段，强烈建议至少具备如下知识后再开始 Rails 开发

Programming

首先需要了解一些如何做程序员的基本原则

The Pragmatic Programmer

这本书告诉你，如何做才能成为一个注重实效的程序员，涉及了非常，非常多的理念和实践，虽然都不深入，但至少让你知道世界是什么样子的。至今认为程序员最应该在新手阶段读的书，也是对整个业界影响最大的经典之一

Linux

几乎所有的开发环境都严重依赖于 GNU/Linux 为主的命令行环境，因此需要学习 linux 的基本概念和操作

The Linux Command Line

这本刚出的书是目前最好的 linux command line 学习指南，生动，清晰，详细，无论是菜鸟还是多年的老手都能从中受益，远超过之前作为标准教材的 practical guide to xx 系列。No starch 这个出版社既有延续至今的 Hacker 精神，也懂得如何发掘有趣的作者

HTTP and Rest

Web 开发对于 Http 的深入理解是必须的，另外 Rails 还使用 Rest 协议作为基本指导原则，所以需要深入理解 Http 和 Rest

RESTful Web Services

这本是目前为止最好的描述 HTTP 与 Rest 的作品，可以让你重新认识 Web，更何况其中的示例是 Ruby 语言 (因为这本书合著者是 Sam Ruby)

Html and CSS

结构和样式不止是设计人员的事，web 开发必须要熟悉

Head First Html with CSS & XHTML

虽然已经出版了很久，但依然是最好的 Html&CSS 入门书

Git and Version Control

版本控制在项目中是一开始就要使用的，不止是开发，一切事情都需要版本控制

Pro Git

这本是迄今为止讲解 Git 最清楚最深入的书，对于新手，不建议看后面的实现原理，先读前几章了解概念和学习日常实践使用是最重要的

Ruby

如果只是在 Rails 中使用的 Ruby，可以使用一些免费的快速入门教程，不过，系统地学习 Ruby，可以了解到很多面向对象开发或函数式编程的思想，对于熟悉和掌握 Rails 帮助非常大

Programming Ruby 1.9

公认的 Ruby 入门经典，不过对于新手来说，只推荐前半的入门部分，高阶内容可以稍后再来学习

Rails

Ruby on Rails Tutorial

最后是 Rails 自身的学习，这本书的最新版涵盖 Rails3.2，是目前为止最好最完整的 Rails 入门教程，可以在线看，还有大量的视频搭配

Advanced

进阶阶段，具备下面的知识，可以让你或多或少地理解 Rails Way，并真正开始写出合格的 Rails 应用

Programming

Refactoring

这本"重构"是当年石破天惊的经典著作，讲解如何持续改进和让代码优雅干净，拥有直到现在还依然适用的价值，尤其为 Ruby On Rails 社区广泛接受，这本书有将其中的 Java 语言换成 Ruby 后的版本

The Art of Unix Programming

由公认的黑客领袖之一 Eric S.Raymond 撰写的这本书总结了长久以来的 Unix 领域中的设计和开发哲学，思想乃至文化体系，是了解 Ruby 和 Rails 诞生于其中的 Unix 黑客文化必不可少的读物

Head First Design Patterns

可以说是了解面向对象开发最容易学习也相对来说深入全面的书籍，无疑是深入浅出系列最出色的作品

Ruby

深入理解 Ruby，除了上边提到的 Programming Ruby 1.9 以及重构等通用编程书之外，还有以下几个选择

Ruby Programming Language

Ruby 之父松本行弘和 O'Reilly 的王牌作者合作，诞生了这本讲解 Ruby 最透彻的经典著作

Eloquent Ruby

Ruby 社区的编程指南之一，介绍了 Ruby 社群的文化，品味和编程原则，强烈地反映了 Ruby 程序员的共同特质：幽默，健谈，追求乐趣，热爱生活

Test Drive

测试驱动开发 (TDD) 以及之后进化的行为驱动开发 (BDD) 是 Ruby 和 Rails 社群的核心文化之一，只有彻底理解并运用 BDD，才是合格的 Rails 开发者

RSpec Book

唯一的也是必读的 BDD 介绍作品，由 RSpec 核心成员撰写

Git

可以坚持把 Pro Git 的后半部分学习完，没有更深入和清楚的书了

Html and CSS

CSS, The Definitive Guide

Eric Meyer 的 CSS 权威指南至今仍然是 CSS2 讲解最全面和最深入的参考书

The Book of CSS3

目前最全面的 CSS3 特性介绍，秉承 No Starch 一贯的精品理念，写的也非常好

HTML5 Up and Running

著名 Googler Mark Pilgrim 的 HTML5 入门介绍作品，Rails3 中也有相当多的 HTML5 实践，这也将是之后的趋势

Javascript and jQuery

Web 开发的交互性会越来越多，Javascript 已经成为了相当严肃，且热门程度超过 Ruby 的编程语言

Javascript, The Definitive Guide

目前最全面最好的 Javascript 学习书籍

Learning jQuery

唯一尚可称得上紧跟 jQuery 发展脚步的学习指南

JavaScript Patterns

深入讲解 Javascript 的常见编程模式

Rails

Rails 发展的实在太快了，最好的方法也许是跟踪在线文档，不过还是推荐这本

The Rails 3 Way

虽然有些内容随着 3.2 的推出已过时，但仍不失为了解 Rails 哲学和原则的入门之作

上边的书籍都读过的话，可能你终于能了解到 Rails 背后涉及的概念和实践有多么庞大惊人，也了解到了还有多么深的知识鸿沟需要跨越，了解到了一切都还只是开始，不过值得庆幸的是，一切事情都需要个开始

我使用的 Rails Gems 列表

lilu — Tue, 28 Aug 2012 14:35:37 +0800

比较主观的一个列表，就不添加到社区的 gems wiki 里了

Rails Test Drive

rspec-rails

行为测试框架 rspec 的 rails 集成

jasminerice

javascript 测试框架 jasmine 的 rails 集成

capybara

web 行为模拟框架

fabrication

测试夹具生成

ffaker

最快的假数据生成器

database_cleaner

测试数据库清空工具

guard

监控文件变化的事件并触发任务，有大量扩展，非常适合运行 spec

guard-rspec

rspec 的 guard 插件

guard-spork

让 guard 集成 DRb server：spork，预加载测试环境可以节省大量的测试时间

guard-jasmine

jasmine 的 guard 插件，使用 phantomjs 做无头浏览器测试

guard-livereload

livereload 的 guard 插件，自动刷新浏览器

Rails Auth

devise

用户注册登录，身份验证的整套解决方案

omniauth

实现第三方登录认证，包括 Twitter，Facebook，微博等等

cancan

为不同用户设定不同级别的权限

Rails Frontend

coffee-rails

Rails 默认使用 coffeescript 生成 javascript

jquery-rails

Rails 默认的 javascript 框架 jQuery

backbone-on-rails

最热门的 Javascript MV*框架 backbone

sass-rails

Rails 默认使用 sass 代替 css

compass-rails

最强大的 CSS 编程框架 Compass，基于 sass

bootstrap-sass

CSS 样式库 Twitter Bootstrap 的 sass 移植

slim

比 Haml 更清晰和更快的模板引擎

kaminari

最好的分页控制器

simpleForm

比起 Rails 默认的 Form 更简洁和更强大的表单控制器

client_side_validations

读取服务端 Model 的验证逻辑并生成对应的客户端验证逻辑，做到 DRY

Rails Backend

mongoid

Mongo ORM

nokogiri

HTML 解析器

capistrano

远程部署工具

carrierwave

文件上传管理，支持各类 ORM，还可以支持各云平台的存储

sunspot

基于 SOLR 的全文检索引擎

resque

将任务放入后台队列执行

whenever

编写和部署 Cron

grape

创建 REST API

Rails Misc

rails_best_practices

控制代码质量的优秀工具

active_admin

为 Rails 项目创建后台管理界面，非常强大的可定制 UI

Ruby General

比起默认的 IRB shell 更强大的终端调试工具

Journey Through The JavaScript MVC Jungle

lilu — Tue, 14 Aug 2012 14:22:52 +0800

著名的前端开发大师 Addy Osmani 最近出炉的各种 Javascript MV*框架的比较和结论，分享一下

http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/

我的感想是 Backbone.js 和 Ember.js 还是最值得考虑的两个选项，前者更简洁灵活，后者更复杂强大，前者有很多留白，不得不用自己的方式实现很多功能，后者则是约定大于配置，几乎什么方面都有默认的实现，两者的关系非常像 sinatra 和 rails

CoffeeScript 详解

lilu — Tue, 07 Aug 2012 17:19:52 +0800

这是今年年初学习 CoffeeScript 的一篇个人总结，觉得也许会对社区有些帮助，就从我的博客转来了这里，因为水平有限，错漏之处在所难免，希望高手指点

序

Every language feature in CoffeeScript has been designed using this kind of process: attempt to take the beautiful dynamic semantics of JavaScript—object literals, function expressions, prototypal inheritance—and express them in a clean, readable, minimal way. by Jeremy Ashkenas, author of CoffeeScript

CoffeeScript是一门简洁的，构架于 JavaScript 之上的预处理器语言，可以静态编译成 JavaScript，语法主要受 ruby 和 python 影响，目前已经为众多 rails 和 node 项目采用。

为什么要用 CoffeeScript?

更少，更紧凑，和更清晰的代码
通过规避和改变对 JavaScript 中不良部分的使用，只留下精华，让代码减少出错率，更容易维护
在很多常用模式的实现上采用了 JavaScript 中的最佳实践
CoffeeScript 生成的 JavaScript 代码都可以完全通过JSLint的检测

什么情况下不推荐使用 CoffeeScript?

CoffeeScript 不是 JavaScript 的超集，也不是完全替代品，不应该在不会 JavaScript 的情况下使用 CoffeeScript 工作

CoffeeScript 是一种需要预编译的语言，不能在运行时 (Runtime) 解释，这造成了她普遍被人质疑的一点，就是如果代码中出现运行时错误时难以调试，不过从实际使用上来看，因为 CoffeeScript 的编译结果大部分情况下自然而合理，至少我从来没有发现从生成的 JavaScript 代码回溯到对应的 CoffeeScript 代码有什么困难之处，我们稍后会看到这种对应关系的细节

这种静态编译还有一个额外的好处，就是 CoffeeScript 和现有的环境 (浏览器，Node,Rhino 等) 与库完全兼容

最简单的安装和测试 CoffeeScript 的方法，是使用node.js的npm安装，然后使用命令行脚本实时编译

npm install -g coffee-script
# watch and compile
coffee -w --output lib --compile src

这里假设你的 coffee 代码在 src 目录下，这个 daemon 会自动检测文件的改变，并编译成 js 文件放到 lib 目录下

语法

与 SASS/LESS 和 CSS 的关系不同，CoffeeScript 不是 JavaScript 的超集，不能在 CoffeeScript 程序中写 JavaScript 代码，比如function等关键字

格式

在 js 中，如果认为当前语句和随后语句是一个整体的话，就不会自己加;，比如以下 javascript 代码

//javascript code
var y = x+f
(a+b).toString()

//parsed to:
var y = x+f(a+b).toString();

很多 js 中的问题由此引起 (实际上现在把;放在哪里，在 js 社区内也是个争论的话题)

而 CoffeeScript 在编译时为每条语句加上;，因此在代码中不需要写;

CoffeeScript 中的注释采用#

# single line comment
### 
  multi line comment
###

CoffeeScript 中对空白敏感，这种做法来自 python，任何需要({})的场合下，可以用缩进代替

作用域

在 js 中最糟糕的设计就是全局变量，当你忘记用var声明变量的时候，这个变量会成为全局对象上的一个属性

CoffeeScript 避免了这点

foo = "bar"

会编译成

(function() {
  var foo;
  foo = "bar";
}).call(this);

任何的代码都会使用Immediate Function包装，这样foo成为了本地变量，并且，可以通过call指定的this引用全局对象

为了方便起见，之后的编译后代码描述不会再加上这个包装

实际上在 CoffeeScript 中，你也不需要再用var声明变量，编译后会自动加上var，并且将声明hoisting，即放到作用域的顶部，看一个来自官方文档的例子

outer = 1
change = ->
  inner = -1
  outer = 10
inner = change()

->是函数定义的简写方式，之后我们会探讨

编译后的 js 如下：

var change, inner, outer;

outer = 1;

change = function() {
  var inner;
  inner = -1;
  return outer = 10;
};

inner = change();

这是类似 ruby 中的自然的作用域实现方式，inner在change()内定义成了局部变量，因为在代码中之前没有定义过

赋值

首先是字符串可以用类 ruby 的语法内嵌

target = "world"
alert "hello, #{target}"

其次是字面量，可以用类似YAML的方法定义对象字面量

object1 = one: 1, two: 2
object2 =
  one: 1
  two: 2
  class: "numbers"

注意保留字class，现在可以直接作为对象的 key 了

数组也可以分行

arr = [
  1
  2
]

也可以解构赋值 (Destructuring)

obj = {a:"foo", b:"bar"}
{a, b} = obj
arr = [1, 2]
[a, b] = arr

数组

数组的操作引入了来自 ruby 的 Range 概念，并且可以将字符串完全作为数组操作

numbers = [0..9]
numbers[3..5] = [-3, -4, -5]
my = "my string"[0..1]

判断一个值是否在数组内，在 js 中可以用Array.prototype.indexOf，不过 IE8 及以下不支持，CoffeeScript 提供了跨浏览器的in操作符解决

arr = ["foo", "bar"]
"foo" in arr

具体的实现上，是一个对indexOf的 Shim

 var arr,
   __indexOf = [].indexOf || function(item) { 
     for (var i = 0, l = this.length; i < l; i++) { 
       if (i in this && this[i] === item) 
         return i; 
     } 
     return -1; 
   };

arr = ["foo", "bar"];

__indexOf.call(arr, "foo") >= 0;

for..in语法可以用在数组上了，背后是用 js 的 for 循环实现的，这比数组的迭代器方法要效率高一些

for name, i in ["Roger", "Roderick"]
  alert "#{i} - Release #{name}"

也具有过滤器when

prisoners = ["Roger", "Roderick", "Brian"]
release prisoner for prisoner in prisoners when prisoner[0] is "R"

看起来很像普通英语了，也可以用()收集遍历的结果

result = (item for item in array when item.name is "test")

遍历对象的属性可以用of,这是用 js 自己的for..in实现的

names = sam: seaborn, donna: moss
alert("#{first} #{last}") for first, last of names

流程控制

CoffeeScript 使用来自 ruby 的省略语法，让控制流变得很紧凑，也引进了unless,not,then等语法糖式的关键字

result = if not true then "false"
result = unless true then "false"

CoffeeScript 中非常好的一点，就是直接取消了 js 中的==判断，改成全部用===进行严格比较，js 中的==会做大量诡异的类型转换，很多情况下是 bug 的来源

if "1" == 1 
  alert("equal")
else
  alert("not equal")

在使用if来进行空值的判断时，js 有时会让人困扰，因为""和 0 都会被转换成 false，Coffee 提供了?操作符解决这个问题，她只有在变量为null或undefined时才为 false

""? #true
null? #false

也可以用常见的类似 ruby 中||=的方法，判断赋值，此外还可以用and,or,is关键字代替&&,||,==

hash or= {}
hash ?= {}

经常有当某个属性存在的时候，才会调用属性上的方法的情况，这时候也可以用?

knight.hasSword()?.poke()

只有当hasSword()返回对象不为空时，才会调用poke方法，以下是编译的 js 代码

var _ref;
if ((_ref = knight.hasSword()) != null) {
  _ref.poke();
}

另一种情况是当poke方法存在时才调用

knight.hasSword().poke?()

对应的 js 代码

var _base;
if (typeof (_base = knight.hasSword()).poke === "function") {
  _base.poke();
}

switch case语句也有了一些语法糖，并且会默认加上break

switch day
  when "Sun" then go relax
  when "Sat" then go dancing
  else go work

函数

CoffeeScript 对 JavaScript 的函数做了很大的简化，举个例子，看一个求和函数

sum = (nums...) ->
  nums.reduce (x, y) -> x+y

sum 1,2,3

对应 JavaScript

var sum,
    __slice = [].slice;

sum = function() {
  var nums;
  nums = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
  return nums.reduce(function(x, y) {
    return x + y;
  });
};

sum(1, 2, 3);

可以使用和 ruby 1.9 类似的lambda 函数写法->来代替function
参数列表放在->的前边，且可省略
取消了函数声明，只能将函数作为值定义
在 CoffeeScript 中，任何语句都是表达式 (除了break和continue)，都有返回值，因此像 ruby 一样，不需要显式return
js 的函数参数有一个很讨厌的地方，就是参数对象arguments不是一个真正的数组，要使用数组方法，必须转换成数组[].slice.call(arguments, 0)这样，而在 CoffeeScript 中收束 (加...) 的参数是一个真正的数组

CoffeeScript 的函数可以有默认参数，如

times = (a = 1, b = 2) -> a * b

CoffeeScript 的函数调用可以不用()语法包围参数，像 ruby 一样跟在函数名后面就可以，不过这也有时候会带来问题，特别是没有参数的调用

alert

对应的 js

alert;

而不是alert()，这和 ruby 不同，需要注意

缩进的格式有时需要小心，比如用多个函数做参数的时候，需要这样写

$(".toggle").toggle ->
  "on"
, ->
  "off"

对应 js

$(".toggle").toggle(function() {
  return "on";
}, function() {
  return "off";
});

模式

使用 CoffeeScript 的一个重要理由，就是她用自己的语法实现了很多很常用的 js 编程模式，而且，通常是在社区内广泛被承认的最佳实践，如果不熟悉 JavaScript 的这些模式，可能会在调试代码上遇到一些麻烦，不过，基本上来说还是比较简单易懂的，下面我们会花一些时间研究一下 CoffeeScript 是用什么样的方法来封装这些通用编程模式的

闭包

在 js 中，普遍会使用闭包实现各种事件的 handler 或封装模块，以下是 CoffeeScript 对这一普遍模式的实现

closure = do ->
  _private = "foo"
  -> _private

console.log(closure()) #=> "foo"

do关键词可以产生一个Immediate Function,下面是对应 js 代码

var closure;

closure = (function() {
  var _private;
  _private = "foo";
  return function() {
    return _private;
  };
})();

闭包中经常需要绑定this的值给闭包的私有变量，CoffeeScript 使用特殊的=>语法省去了这个麻烦

@clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => @clickHandler(e)

使用=>生成函数，可以看到生成代码中会加上对this的绑定

var _this = this;

this.clickHandler = function() {
  return alert("clicked");
};

element.addEventListener("click", function(e) {
  return _this.clickHandler(e);
});

这里 CoffeeScript 对于this有简单的别名@

扩展

在 js 中，所有的对象都是开放的，有时候会扩展原有对象的行为 (比如对数组的 ECMA5 shim)，这也称为 Monkey patching

String::dasherize = -> @replace /_/g, "-"

::代表原型的引用，js 代码如下

String.prototype.dasherize = function() {
  return this.replace(/_/g, "-");
};

类

在 js 中是否要模拟传统编程语言的类，是个一直以来都有争议的话题，不同的项目，不同的团队，在类的使用上会有不同的看法，不过，一旦决定要使用类，那么至少需要一套良好的实现，CoffeeScript 在语言内部实现了类的模拟，我们来看一看一个完整的例子

class Gadget
  @CITY = "beijing"

  @create: (name, price) ->
    new Gadget(name, price)

  _price = 0

  constructor: (@name, price) ->
    _price = price

  sell: =>
    "Buy #{@name} with #{_price} in #{Gadget.CITY}"

iphone = new Gadget("iphone", 4999)
console.log iphone.name #=> "iphone"
console.log iphone.sell() #=> "Buy iphone with 4999 in beijing"

ipad = Gadget.create("ipad", 3999)
console.log ipad.sell() #=> "Buy ipad with 3999 in beijing"

这个 Gadget 类具有通常语言中类的功能：

constructor是构造函数，必须用这个名称，类似 ruby 中的 initialize
name是实例变量，可以通过iphone.name获取
构造函数中如果给实例变量赋值，直接将@name写在参数中即可，等价于在函数体中的@name = name
_price是私有变量，需要赋初始值
sell是实例方法
create是类方法，注意这里使用了@create，这和 ruby 有些像，在定义时的this指的是这个类本身
CITY是类变量

要注意的是，对于实例方法，要用=>来绑定this，这样可以作为闭包传递，比如

iphone = new Gadget("iphone", 4999)
$("#sell").click(iphone.sell())

如果不用=>，闭包被调用时就会丢失实例对象的值 (iphone)

对于熟悉基于类的面向对象编程的人，CoffeeScript 的类是一目了然的，下面来看看对应的 js 代码

var Gadget,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Gadget = (function() {
  var _price;

  Gadget.name = 'Gadget';

  Gadget.CITY = "beijing";

  Gadget.create = function(name, price) {
    return new Gadget(name, price);
  };

  _price = 0;

  function Gadget(name, price) {
    this.sell = __bind(this.sell, this);
    this.name = name;
    _price = price;
  }

  Gadget.prototype.sell = function() {
    return "Buy " + this.name + " with " + _price + " in " + Gadget.CITY;
  };

  return Gadget;

})();

以上的代码有很多值得注意的地方

整体上来说，CoffeeScript 的类模拟使用的是一个构造函数闭包，这是最常用的模拟类的模式，好处是可以完整地封装内部变量，且可以使用new来生成实例对象
_price就是被封装在闭包内部的私有变量
sell这样的实例方法是原型方法，并且在初始化时使用自定义的 bind 函数绑定实例 (用=>定义的情况)
create和CITY这样的类成员使用构造函数的属性实现，重复一下，在 CoffeeScript 类定义中的this指的是整个闭包Gadget
Gadget.name是额外定义的类名属性

类的继承

CoffeeScript 中为方便地实现类的继承也定义了自己的语法，我们把上面的类简化，来看一下如何继承：

class Gadget
  constructor: (@name) ->
  sell: =>
    "Buy #{@name}" 

class IPhone extends Gadget
  constructor: -> super("iphone")
  nosell: =>
    "Don't #{@sell()}"

iphone = new IPhone
iphone.nosell() #=> Don't Buy iphone

使用extends关键字可以继承父类中的所有实例属性，比如sell
super方法可以调用父类的同名方法
如果不覆盖constructor，则她被子类默认调用

来看一下对应的 js 代码，这有一些复杂，我们把和上边类定义中重复的地方去掉，只留下继承的实现部分

var Gadget, IPhone,
  __extends = function(child, parent) { 
    for (var key in parent) { 
      if ({}.hasOwnProperty.call(parent, key)) 
        child[key] = parent[key]; 
    } 

    function ctor() { this.constructor = child; } 

    ctor.prototype = parent.prototype; 
    child.prototype = new ctor; 
    child.__super__ = parent.prototype; 

    return child; 
  };

IPhone = (function(_super) {

  __extends(IPhone, _super);

  IPhone.name = 'IPhone';

  function IPhone() {
    this.nosell = __bind(this.nosell, this);
    IPhone.__super__.constructor.call(this, "iphone");
  }

  IPhone.prototype.nosell = function() {
    return "Don't " + (this.sell());
  };

  return IPhone;

})(Gadget);

这里重点有三个，

__extends函数使用了代理构造函数ctor来实现继承，这是非常普遍的 js 中对象继承的实践模式，进一步解释一下
- 使用代理构造函数的目的是为了避免子类被更改时父类受到影响
- 使用ctor.prototype = parent.prototype的意义是只继承定义在 prototype 上的公用属性
父类的类成员被直接引用拷贝到子类，而不是原型继承
super的实现方法是parent.prototype.constructor.call(this)

混入 (Mixin)

在 ruby 语言中的 Mixin，能够让你的类获得多个模块的方法，可以说是对多重继承一种很好的实现，虽然在 CoffeeScript 中并没有像 ruby 的include一样的内置功能，但很容易实现她

class Module
  @extend: (obj) ->
    for key, value of obj 
      @[key] = value

  @include: (obj) ->
    for key, value of obj 
      @::[key] = value

classProperties =
  find: (id) ->
    console.log("find #{id}")

instanceProperties =
  save: ->
    console.log("save")

class User extends Module
  @extend classProperties
  @include instanceProperties

user = User.find(1)
user = new User
user.save()

继承了 Module 的类才可以 Mixin，当然，这里也可以用组合或者直接为 js 的构造函数做 Monkey patching
classProperties是类成员模块，使用@extend来 Mixin，实现是简单的拷贝对象的属性
instanceProperties是实例成员模块，使用@include来 Mixin，实现是拷贝对象原型的属性
需要指出的是，这里的拷贝是引用拷贝，有可能外部会更改被 Mixin 的模块内部值，更好的方法是深层值拷贝 (clone)，包括 JQuery 在内的很多类库都实现了这类扩展方法

结语

CoffeeScript 提供了一门比 JavaScript 更强大，优雅，表现力丰富的语言，但她毕竟架构于 JavaScript 之上，而且是静态地编译成 JavaScript 代码，也就是说，她不能完全避免对 JavaScript 中一些不良部分的滥用，比如eval,typeof,instanceof等，所以，在任何情况下，建议始终开启Strict Mode

"use strict"

严格模式是一个 ECMA5 标准提出的 js 子集，禁用了很多 js 设计中不好的方面，在未来会逐渐成为 js 的语言标准，详细介绍在这里

SASS 和 Compass 指南

lilu — Wed, 18 Jul 2012 15:57:16 +0800

前一段写的一篇，原载于我自己的blog ，算一个简单的介绍吧，可能有一些错漏，请多包涵：）

CSS 预处理器

CSS 预处理器 (CSS Preprocessor)，是一种构架于 css 之上的高级语言，可以通过脚本编译生成 CSS 代码，其目的是为了让 CSS 开发者的工作更简单有趣，当前已经进入了较为成熟的阶段，基本上新的 web 开发项目大都已普遍使用。

现在最主要的选择有：

SASS 2007 年诞生，最早也是最成熟的 CSS 预处理器，拥有 ruby 社区的支持和 compass 这一最强大的 css 框架，目前受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS。
LESS 2009 年出现，受 SASS 的影响较大，但又使用 CSS 的语法，让大部分开发者和设计师更容易上手，在 ruby 社区之外支持者远超过 SASS，其缺点是比起 SASS 来，可编程功能不够，不过优点是简单和兼容 CSS，反过来也影响了 SASS 演变到了 SCSS 的时代，著名的 Twitter Bootstrap 就是采用 LESS 做底层语言的。
Stylus，2010 年产生，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如 SASS 和 LESS。

我较为推崇的组合是，SASS+Compass+Twitter Bootstrap+bootstrap-sass，这一组合能够获得最好的底层语言 SASS，最好的框架 Compass，和 Bootstrap 提供的最强大的 UI 组件库 (被 bootstrap-sass 翻译成 SASS 的风格)。

下面就对 SASS 的常用要素做一简单介绍，大部分例子来自 SASS 设计者 Hampton Catlin 的著作Pragmatic Guide to Sass，本文不涉及安装过程，命令行工具，和其他 web 开发框架 (比如 Rails) 的结合，早期非 SCSS 的语法等内容，想了解更多的朋友可深入阅读上边这本书。

嵌套 (nesting)

/*CSS选择器(Selector)经常要重复class,id和element的名称*/
.infobox {width: 200px;}
.infobox .message {border: 1px solid red;}
.infobox .message > .title {color: red;}

//SASS可以让选择器嵌套，做到DRY
.infobox {
    width: 200px;
    .message {
        border: 1px solid red;
        > .title {color: red;}
    }
}

对于某些需要引入父选择器名称的情况，SASS 使用&代替

/*CSS会让同样元素的样式变得分散*/
.infobox {color: blue;}
.user .infobox {color: gray;}
.message {color: gray;}
.message.new {color: red;}

//SASS可以让他们在一起
.infobox {
    color: blue;
    .user & {color: gray;}
}
.message {
    color: gray;
    &.new {color: red;}
}

对于当前做跨平台 web 开发来说，@media非常常用，而 SASS 的嵌套会区别对待

/*CSS*/
.main {
    font-size: 15px;
}    

@media screen and (max-width: 320px) {
    .main {
        font-size: 35px; 
    }
}

//SASS让同样的选择器在不同media条件下的样式在一起
.main {
    font-size: 15px;
    @media screen and (max-width: 320px) {
        font-size: 35px; 
    } 
}

变量 (variables)

变量是编程语言的基石，掌握变量的定义和使用，是 SASS 编程的起点。

/*CSS中同样的值不得不重复很多次*/
body {background: #336699;}
body #wrapper {
    width: 300px;
    background: white;
    border: #eee; 
}
body #wrapper h1 {color: #336699;}

//SASS有了变量，只需要改一次，而且往往相关值一起定义的，方便查找
//可以定义全局变量
$primary_color: #369;
$secondary_color: #eee;

body {
    //也可以定义局部变量
    $page_width: 300px;

    background: $primary_color;
    #wrapper {
        width: $page_width;
        background: white;
        border: $secondary_color;
        h1 {color: $primary_color; } 
    } 
}

关于上边代码中的全局和局部变量，这里稍微说一下 SASS 的缺点，同名局部变量会覆盖全局变量的值，这很不自然

//SASS这一点不如LESS
$color: black;           
.scoped { 
    $color: white;
    color: $color;        
}                        
.unscoped {     
    // LESS = black (global)
    // SASS = white (overwritten by local)
    color: $color;          
}

有了变量，自然可以进行对值的计算

//Calculating in SASS
//以下代码中修改页面宽度只需要改一次
$width: 500px;
$sidebar_percent: 0.2;
#page {
    width: $width;
    #sidebar {width: $width * $sidebar_percent;}
    #content {width: $width * (1 - $sidebar_percent);} 
}

变量还可以嵌入字符串中，这在编程语言中称为插值(Interpolating)

//CSS 
.car.bmw_make {color: blue;}   
.car.bmw_make .image {
    background: url("images/bmw.png");
}

//Interpolating in SASS
$car: "bmw";

.car.#{$car}_make {s
    color: blue;
    .image {
        background: url("images/#{$car}.png");
    }
}

函数 (function)

在编程语言中，函数是仅此于变量的基本结构体，SASS 中有很多预定义函数，这里用颜色相关的函数举例如下

/*CSS需要定义整套颜色*/
.main {color: #336699;}
.lighten {color: #6699cc;}
.saturate {color: #1466b8;}

//SASS只需要定义一个基本颜色，其他可以通过函数获取
$main_color: #336699;
.main {color: $main_color;}
.lighten {color: lighten($main_color, 20%);}    
.saturate {color: saturate($main_color, 30%);}

SASS 的底层函数相当完整，如果会使用 ruby 的话，也可以自定义函数，完整列表在这里

导入 (import)

在样式表过于复杂的时候，你可以将其按功能模块分割成不同的文件进行开发，SASS 会将这些小文件统一编译成一个完整的 CSS 文件，与简单的包含多个文件不同，SASS 的导入，是可以将变量，Mixin，等等一起导入的

//_colors.scss(被导入的SASS文件，通常用_开头，它们在编译过程中不会生成CSS文件)
$main_color: #336699;

//application.scss 导入文件
//SASS会自动加上_去寻找文件
@import "colors";
#page {color: $main_color;}

扩展 (extend)

@extend可以复制其他 class 或 id 的指定样式，让你无须再将逻辑上不相关的 class 放在一起，当然更不用复制粘贴了

//CSS
.blue_button, .checkout_button {background: #336699;}
.blue_button {color: white;}
.checkout_button {color: green;}

//SASS @extend
.blue_button {
    background: #336699;
    color: white;
}

.checkout_button {
    @extend .blue_button;
    color: green;
}

混入 (mixin)

Mixin 可以说是 SASS 等 CSS 预处理语言最强大的要素了，简单来说，mixin 可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。

Mixin 可以定义在单独文件中

//_text.scss
@mixin blue_text {
    color: #336699;
    font-family: helvetica, arial, sans-serif;
    font-size: 20px;
    font-variant: small-caps; 
}

导入并使用 mixin

@import "text";

.product_title {
    @include blue_text;
}

mixin 与 extend 看似实现的功能差不多，但实际上除了语义上的不同外，mixin 更为强大和复杂，因为她有参数 (arguments)，参数还可以有默认值

实现跨浏览器圆角

//Cross browser Rounded borders mixin 
@mixin rounded_borders($color, $width: 5px, $rounding: 5px) {
    -moz-border-radius: $rounding $rounding;
    -webkit-border-radius: $rounding $rounding;
    -khtml-border-radius: $rounding $rounding;
    -o-border-radius: $rounding $rounding;
    border-radius: $rounding $rounding;
    border: $width $color solid; 
}

.header {
    @include rounded_borders(#336699, 3px);
}

实现跨浏览器透明度

//Cross browser Opacity mixin
@mixin opacity($opacity) {
    filter: alpha(opacity=#{$opacity*100}); // IE 5-9+
    opacity: $opacity; 
}

.h1 {
    @include opacity(0.6);
}

迭代 (each)

在主流语言中，迭代属于循环实现的一种功能，例如 ruby 的 each 或者 python 的 for in，sass 使用@each实现

/*CSS中要写很多同样的代码*/
.thom_picture {background-image: url("/image/thom.jpg");}
.jonny_picture {background-image: url("/image/jonny.jpg");}
.colin_picture {background-image: url("/image/colin.jpg");}
.phil_picture {background-image: url("/image/phil.jpg");}

//SASS使用@each变得非常简单
@each $member in thom, jonny, colin, phil {
    .#{$member}_picture {
        background-image: url("/image/#{$member}.jpg"); 
    } 
}

条件 (condition)

说到编程基本控制流，除了循环就是条件了，sass 中使用@if进行条件控制

//判断式中可以使用==/>/<等通常判别符
@mixin country_color($country) {
    @if $country == france {
        color: blue; 
    }
    @else {
        color: red; 
    } 
}

.england {
    @include country_color(england);
}
.france {
    @include country_color(france);
}

Compass

以上 SASS 的基本要素都介绍的差不多了，不过对于在实践中使用 SASS 来说，强大的Compass是必不可少的，她由 SASS 的核心团队成员 Chris Eppstein 创建，是一个非常丰富的样式框架，包括大量定义好的 mixin，函数，以及对 SASS 的扩展。

这里非常简要地介绍一些常用功能

Reset

Compass 提供一个基于大名鼎鼎的 Eric Meyer 的 Reset CSS，我还没有和 Twitter Bootstrap 采用的 Normalize.css 一一比对过，不过 compass reset 的好处是可以分不同的模块 reset

//compass reset
//global reset
@import "compass/reset";

//partial reset 
@import "compass/reset/utilities";

CSS3

前边提到的圆角和透明 mixin 实际上都在 Compass 中提供，当然还有几乎所有的 css3 相关模块，实际上有了 Compass，不需要再写任何浏览器特定的代码了。

//compass rounder corners
@import "compass/css3/border-radius";

.header {
    @include border-radius(4px); 
}

.header_top_left_rounded {
    @include border-top-left-radius(4px);
}

Typography

Compass 有很多基本 mixin 可以方便地定制各种表现层元素

比如水平列表，这个在顶部导航栏中相当常用

//Compass
@import "compass/typography/lists/horizontal-list";

ul.horiz {
    @include horizontal-list(4px); 
}

我们看一眼在 css 中的对应实现多么复杂

/*CSS实现*/
ul.horiz {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    *zoom: 1; 
}
ul.horiz li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
    white-space: nowrap;
    display: inline;
    float: left;
    padding-left: 4px;
    padding-right: 4px; 
}
ul.horiz li:first-child, ul.horiz li.first {
    padding-left: 0; 
}
ul.horiz li:last-child {
    padding-right: 0; 
}
ul.horiz li.last {
    padding-right: 0; 
}

Layout

Compass 也提供一些影响布局的方法，比如将一个元素延展 (Stretch)

HTML 如下

<div class="stretch_box">
    <div class="stretched>
        Stretched fully!
    </div>
</div>

//compass stretching
@import "compass/layout/stretching";

//stretched fully
.stretched {
    @include stretch; 
}

//stretched with gap
.stretched {
    @include stretch(12px, 12px, 12px, 12px); 
}

//stretched horizontally
.stretched {
    @include stretch-x; 
}

Utilities

Compass 还有很多实用功能模块，比如很烦人但在布局中经常要使用的 clearfix，有了这个 mixin，就不需要再定义一个 clearfix 的 class，然后污染 outer_box 的 html 了

//Compass clearfix
    @import "compass/utilities/general/clearfix";

    #outer_box {
        @include clearfix;
        width: 500px;
        #inner_box {
            float: left;
            width: 200px;
            height: 100px;
        }
    }

另外一个强大的功能是 css sprites，原来我们经常用 photoshop 手动生成这张集合了所有小图标的大图片，修改和维护如同噩梦，现在有了 compass，一切轻松了。

//compass sprites
//combines all images in icon folder into one
@import "icon/*.png";

//"movie" is the origin icon's file name
.movie_icon {
    height: 20px;
    @include icon-sprite(movie); 
}

整篇介绍到这里就结束了，其实，无论是 SASS 这样的 CSS 预处理器，还是 Compass 这样的框架，要达成的目的都是一致的，那就是遵循DRY, 可读性, 和正交化的设计原则，让我们的生活变得更轻松快乐。

聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp

lilu — Tue, 17 Jul 2012 16:47:30 +0800

SASS and LESS

不管是SASS，还是LESS，都可以视为一种基于 CSS 之上的高级语言，其目的是使得 CSS 开发更灵活和更强大，这两者我的感觉是对于程序员来说，SASS 的功能要远比 LESS 强大，基本可以说是一种真正的编程语言了，而对于设计师，LESS 则相对清晰明了，这里是 Chris Coyier 写的一篇关于 SASS 和 LESS 的背靠背对比，可以说是相当中肯的 (评论也相当有料喔)。当然，如果使用 Rails 之类的框架，基于 SASS 是会来的更方便一些。

Compass and Blueprint

SASS 和Compass的关系，在很多人来看类似于 ruby 和 rails，compass 基于 SASS，是一个真正意义上的编程框架，提供了大量的 mixin(可理解为函数库)，无论是对 css3 繁杂的多浏览器写法的简化支持，还是实现各种常见功能的 helper，都是强大而丰富的。另外，包括 Scott Davis 和 Eric Meyer 的核心团队，也可以说是全明星组合。

Blueprint是一套预定义的样式，包括对大部分常用 web 交互组件的渲染，并且有一个强大的格子布局系统 (grid system)，即使不懂设计的程序员，也可以使用 blueprint 的默认样式做出很漂亮的页面。

Blueprint 和 Compass，是一个分工很明确的组合，前者负责样式渲染，后者则是基础框架和模块，可以说，在 bootstrap 诞生之前，是 web 开发首选的黄金组合。

HTML5 Boilerplate

HTML5 Boilerplate项目 (以下简称 h5bp) 则如同名字一样，实现的是一个 web 页面的标准模板，尤其针对 html5 进行了全面优化，同时也对老浏览器向后兼容，基本上来说，h5bp 与样式相关的主要部分，是 compass 的一个子集，不过 h5bp 并不只限于 css，还默认引入了很多很好的 js 开发库，包括Modernizr和 Jquery，再加上一个标准化的 index.html 模板

h5bp 是这里提到的所有框架中使用起来最方便的，当然受功能限制，她最适用的目标是单页 web app 或者静态页面，对于复杂的项目来说，需要和其他框架做互补。

Twitter Bootstrap

新兴而野心十足的 Bootstrap 跟上述又都不同，她是基于 LESS 的一套前端工具库，意图非常明显，想以一个项目，整合 Compass，Blueprint，h5bp 的目标功能，成为 web 前端的一站式解决方案。

一套完整的基础 css 模块，但不如 compass 丰富和强大
一套预定义样式表，包括一个格子布局系统，和 blueprint 提供的差不多，只是设计风格不一样
一组基于 Jquery 的 js 交互插件，这是 Bootstrap 真正强大的地方，也是她严格意义上可以取代 Blueprint 的原因所在，这些非常不错的小插件，包括对话框，下拉导航等等，不但功能完善，而且十分精致，正在成为众多 jquery 项目的默认设计标准。

特别提一下，Bootstrap 使用Normalize.css来进行 Reset CSS，这一项目已经成为了事实标准 (超过 Compass 的 Eric meyer 2.0)，强烈推荐使用，另外前边说的 h5bp 也使用 Normalize，因此，如果你在项目中同时使用了 h5bp 和 Bootstrap，请注意，没有必要再引入 h5bp 的初始样式表 style.css

So What?

说了一大堆，该来点结论了，目前对于 web 开发，尤其是由程序员进行的 full stack 开发，最好的组合是：

SASS+Compass+Bootstrap

这样既可以利用 SASS 强大的编程能力，Compass 强大的底层函数，又可以获取 Bootstrap 丰富的 UI 组件支持。

只是，Bootstrap 是基于 LESS 的，要让她们协同工作，需要一个 SASS 的 Bootstrap 移植版本，幸亏 github 上从来不缺这类项目，当前最好的一个是bootstrap-sass

@ericguo 特别去看了一下 bootstrap-rails 的代码，发现 bootstrap-rails 和 bootstrap-sass 在对 bootstrap 的翻译上实现几乎一致，只是一些名字上的不同，不过我只是过了一遍相对较复杂的 mixin.scss 的内部实现，可能其他模块有比较大的差异也说不定：）

在实现差不多的情况下，bootstrap-sass 我认为还是稍好一点，因为可以很方便地支持 compass，无论有无 rails，都可以挂成 compass 的扩展，这点虽然不需要很多代码实现，但还是很有用的，毕竟用 sass 和 rails 的人基本都需要 compass 和 bootstrap 一起工作吧。

我的 Emacs 24 配置

lilu — Fri, 04 May 2012 14:20:30 +0800

https://github.com/Lilu/my-emacs

emacs24 only

欢迎任何 pull request

lilu (李路)

出 Oculus Rift 一台，99 成新

[深圳] Knewone.com 招聘 Ruby/Javascript/iOS 程序员

Herman Miller Aeron @ Knewone (广告)

OpenSSL Errors, Ruby 2.0 and Rails – Certificate Verify Failed

Errors with Ruby 2.0

Check RubyGems Version

Old Versions of OpenSSL

Knewone: 从程序员视角看 Lean Startup (CSDN 线下活动&讲义)

Rails is omakase - 中文版

Omniauth，微博与 CookieOverflow

关于电脑配置的访谈，求参与

推荐 mongoid 下的 friendly_id: mongoid-slug

[北京] Ruby 主题性活动建议

机械键盘 HKKB Pro 2 vs Others?

Kent Beck 谈测试粒度

Rails 学习推荐书籍列表

Beginning

Programming

Linux

HTTP and Rest

Html and CSS

Git and Version Control

Ruby

Rails

Advanced

Programming

Ruby

Test Drive

Git

Html and CSS

Javascript and jQuery

Rails

More

推荐 js 库列表

Base

Preprocessor: coffee-script

Client Framework: jquery

Function Lib: underscore

MV* Framework: backbone

Test Framework: jasmine

Template Engine: handlebars

Loader: requirejs

Style Framework: twitter-bootstrap

Options

UI Widgets

UI Components

UI Layouts

HTML5 Polyfills

Formats

Misc

我使用的 Rails Gems 列表

Rails Test Drive

Rails Auth

Rails Frontend

Rails Backend

Rails Misc

Ruby General

Journey Through The JavaScript MVC Jungle

CoffeeScript 详解

序

语法

格式

作用域

赋值

数组

流程控制

函数

模式

闭包

扩展

类

类的继承

混入 (Mixin)

结语

SASS 和 Compass 指南

CSS 预处理器

嵌套 (nesting)

变量 (variables)

函数 (function)