值得称赞的Sass

时间:2021-01-03 01:36:36

sass

很早就想尝试这个HAML团队的杰作,当放在todo-list里一直做冷板凳,最近手头时间比较宽松终于能拿出来开荤了。

用了半天时间,把当前手上一个项目的css全部转换为scss(是个较大的项目,估计有上2千行),可见其转换过程并不痛苦,我自己感觉也是比较顺畅的,这彻底打消了我在less和scss间做选择的纠结。

语法很简单,看完tutorial就没问题了,Documentation 基本上都不用看。

相比较而言,前段时间尝试的coffescript给我的感觉过于嚣张啦~~ 在好多没必要的地方过份包装,不符合我最看重的kissy原则(只做最需要去做的事情),完全把javascript扔到了脑后,让使用者找不到写js的感觉了。我觉得coffescript应该秉承一条核心使命,它并需要把js来一个彻底的华丽转身,因为js社区的基础已经非常雄厚,很多人的相关编码经验没必要抛弃。coffescript的使命应该只有一条最简单的:增强javascript代码可读性。

从今年开始,node.js社区的发力,seajs的出世,coffescript、sass项目的成熟标志着前端开发在这一年进步神速。如果这些好项目都今后能够健康发展,

未来我们可以称今年为前端开发次世代元年吗?

最后,放一个我用scss实现的一个kissy框架双飞翼布局中的代码生成功能:

http://kissy.googlecode.com/svn/trunk/src/cssgrids/css-generator.html

以前生成双飞翼布局的代码都要跑这个页面去,非常不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 */