CSS 预编译器 LESS & SASS & stylus

新式武器:Nodejs 预编译 CSS——stylus

LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。本质上,LESS 包含一套自定义的语法及一个解析器,LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。
同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。
LESS 和 SASS 互相促进互相影响,相比之下 LESS 更接近 CSS 语法,更多两者之间的比较,请参考这篇帖子:https://gist.github.com/674726
SASS:
  • @at-root 跳出嵌套,用于在嵌套写法中缩减类名长度
  • % 占位符选择器(包含几个css属性),没有调用的样式不会编译,通过@extend调用。
  • 三木运算,if(true, 1px, 2px) => 1px
  • 多个字段循环
  • 字符串表示 #{"asdfasdf"}