Css 预处理语言Sass、less、stylus区别

CSS 预处理器框架，分别是 Sass、Less 、Stylus。CSS预处理器为CSS提供了更多的更加灵活的可编程性。

增加了变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等特性。

0.背景介绍

1. Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架。目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。

2. Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS。其缺点是比起SASS来，可编程功能不够。不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的

3. Stylus：2010年产生，来自Node.js社区。主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

1.语法区别

首先 Sass 和 Less 都使用的是标准的 CSS 语法， Sass 同时也支持老的语法，就是不包含花括号和分号的方式。

 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名

下面是 Stylus 支持的语法：

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit bracket