scss、sass、less、stylus 和css 都是些什么东西，他们都有哪些区别，都应该如何用？

2021-01-20 03:12

阅读：491

标签：css 全面 com 产生兼容个人引用运行社区

我们都知道网站页面绘制基础三巨头 html、js、css。css是写样式用的东西，但是我们都知道css的语法比较死板，没有变量，不能引用，不像js一样的灵活，没有函数，没有全局变量啥的，一些开发人员为提高开发效率，而开发的一些css预编译工具，来快速的开发css。

下面我们就来看看具体的都是怎么用的吧

先说下:css的发展

Sass:2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

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

SCSS:2010年5月，ruby公司就又推出了SCSS,其实SCSS就是Sass的写法之二

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

语言特点

Sass:Sass语法的缩排语法，比Css比多出很多功能，如变量，嵌套，运算，继承，颜色处理，函数等，易于阅读。Cass的安装需要安装Ruby环境，

Less:Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

SCSS:对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。