值得称赞的Sass

http://sass-lang.com/tutorial.html
很早就想尝试这个HAML团队的杰作，放在todo-list里一直做冷板凳，最近手头时间比较宽松终于能拿出来了。
用了半天时间，把当前手上一个项目的css全部转换为scss（是个较大的项目，估计有上2千行），可见其转换过程并不痛苦，我自己感觉也是比较顺畅的，这彻底打消了我在less和scss间做选择的纠结。
语法很简单，看完Tutorial就没问题了，Documentation 基本上都不用看。

相比较而言，前段时间尝试的coffescript给我的感觉过于嚣张啦~~ 

在好多没必要的地方过份包装，不符合我最看重的kissy原则（只做最需要去做的事情），完全把javascript扔到了脑后，让使用者找不到写js的感觉了，可能是作者太喜欢ruby了吧。

我觉得coffescript应该秉承一条核心使命，它并需要把js来一个彻底的华丽转身，因为js社区的基础已经非常雄厚，很多人的相关编码经验没必要抛弃。coffescript的使命应该只有一条最简单的：减少javascript的代码行数！

从今年开始，node.js社区的发力，seajs的出世，coffescript、sass项目的成熟标志着前端开发在这一年进入了新的加速期。如果这些好项目都今后能够健康发展，未来我们可以称今年为二次元年吗？

最后，放一个我用scss实现的一个kissy框架双飞翼布局中的代码生成功能。以前生成双飞翼布局的代码都要跑这个页面去，非常不coder，现在用scss即能够亲松实现代码生成：

/*#region Grids */
body{text-align:center;}
.wapper{margin:0 auto;width:960px;position:relative;text-align:left;}
.col-main {float: left;width: 100%; min-height: 1px;}
.col-sub, .col-extra {float: left;}
.layout:after, .main-wrap:after, .col-sub:after, .col-extra:after {content: '\20';display: block;height: 0;clear: both;}
.layout, .main-wrap, .col-sub, .col-extra {zoom: 1;}

@mixin grid-sxm0($scol) {
.main-wrap { margin-left: $scol*40px; }
.col-sub { width: $scol*40 - 10px; margin-left: -100%; }
}
.grid-s4m0{@include grid-sxm0(4);}
.grid-s5m0{@include grid-sxm0(5);}
.grid-s6m0{@include grid-sxm0(6);}
.grid-s7m0{@include grid-sxm0(7);}

@mixin grid-m0sx($scol) {
.main-wrap { margin-right: $scol*40px; }
.col-sub { width: $scol*40 - 10px; margin-left: $scol*40 - 10px; }
}
.grid-m0s6{@include grid-m0sx(6);}
.grid-m0s7{@include grid-m0sx(7);}
.grid-m0s8{@include grid-m0sx(8);}
.grid-m0s9{@include grid-m0sx(9);}
.grid-m0s10{@include grid-m0sx(10);}

@mixin grid-exm0sx($ecol, $scol) {
.main-wrap { margin: 0 $scol*40 0 $ecol*40; }
.col-sub { width: $scol*40 - 10px; margin-left: -($scol*40 - 10px); }
.col-extra { width: $ecol*40 - 10px; margin-left: -100%; }
}
.grid-e6m0s5{@include grid-exm0sx(6,5);}

@mixin grid-m0sxx($xx) {
.main-wrap { margin-right: $xx + 10px; }
.col-sub { width: $xx; margin-left: -$xx; }
}
.grid-m0s220{@include grid-m0sxx(220);}
/*#endregion Grids */