LESS和SASS的区别与速查表-译文

原文

对于我们CSS开发者来说经常听到一些关于’LESS’和’SASS’的信息,但是我们并不知道这都是什么意思,这篇文章就是为我们而准备的.在调查这些语言后,我已经发现它们都是一些js文件,运行后会产生相应CSS文件给我们.为什么我们要使用’LESS’和’SASS’它们呢,因为我们可以避免CSS中需要的重复性任务.

它们两种语言都很棒而且都有相应的优点和缺点.这就是我为什么写这篇文章的理由了:

  1. 比较LESS和SASS的优点和缺点
  2. 写一张速查表来查看他们的语法不同
LESS SASS
CSS转换 link标签导入.less文件和less javascript文件或使用CodeKit或者SimpLESS等工具转换.less文件为.css文件 通过Ruby on Rails或者CodeKit工具转换.scss或.sass为.css文件
变量 @blue: #00214D; span.blue{color:@blue;} $blue:@00214D; span.blue{color:$blue;}
Mixin .small-serif{some} p.small-serif{.small-serif;} @mixin small-serif{some} p.small-serif{@include small-serif}
Mixin with Parameters border-radius(@radius:5px){some} div.sqround{.border-radius;} div.circle{.border-radius(10px);} @mixin border-radius($radius:6px){some} div.sqround{@include border-radius;} div.circle{@include border-radius(10px);}
嵌套规则
操作符
模式匹配
循环
函数