SASS,Stylus,LESS这三个css预处理器你选哪个？

Question

传统的CSS写法太原始了。

Answer 1

不要仅仅觉得 CSS 原始就想换别的，如果你的项目很简单很基础，根本无需用到这些。只有在项目很大时，才需要用这种方式提高可维护性。

相比较 SASS 比 LESS 成熟很多，不过 LESS 学习起来更快一些的，因为他一个网页就介绍完了所有的功能。SASS 要配合 Compass 才能发挥极致啊，学习成本会多一些，下个项目准备采用 Compass

Answer 2

长期没有关注前段技术的我表示孤陋寡闻了……

刚才花了点时间大概看了看SASS和LESS，感觉都差不太多，当然Compass在SASS的基础上实现了许多pattern，可以让开发变得更有效率。

不过SASS是通过ruby安装的，所以是依赖与Ruby哦。less只用引入一个js就行了，使用门槛更低，我以后打算就用less了，而且我相信以后依赖于less的，类似compass的框架也会出现

wait a minute... 加几句话……

我发less也有一些不太好的地方，less.js是通过ajax获取less文件的内容，parse, 然后将parse好的内容直接插入到head里面……这效率有问题吧，而且如果客户端因为某种原因没加载js就更不爽了（比如用了firefox的noscript什么的）……到还不如使用SASS直接编译好直接下载来得爽快，如果是在生产环境而且css内容较多的情况下，还是SASS吧

当然LESS还是可以用的，用在小项目上相当不错

Answer 3

Scss compress

Answer 4

大型项目、复杂的SPA比较适合这类东西。

最开始接触的是less，后来转向sass了。

因为sass的内置函数比较多，而且当时的sass有compass嘛（不过现在个人也不怎么用compass，简单为王）。

这两年sass和less也在相互学习，新版本特性方面越来越像了，比如sass也出现了局部变量等等。两者的社区也是差不多活跃的。所谓如何选择也只是语法上的区别。当然我个人更喜欢sass。

至于编译器，这三种预编译的编译器都已经有了nodejs版本，甚至还有grunt插件，so，完全不用担心还要额外装ruby之类的啦~

stylus没用过，不评价。

Answer 5

我用postcss+precss（它可以使用sass/less等预处理特性　我觉得已经够了）
写法原汁原味多好，现在前端搞得一些东西要走火入魔了，stylus乍一看还以为是python的兄弟...

常用组件

• autoprefixer 添加不同浏览器前缀（使用Can I use数据）
• precss 可以在使用像sass/less等预处理语言的特性（例如嵌套）
• postcss-import 监听并编译@import引用的css文件
• postcss-sorting 给规则的内容以及@规则排序
• postcss-cssnext 允许使用未来的 CSS 特性（实验性特性）

Answer 6

我个人是从 less-> sass -> stylus
less语法简单，入门最容易。
sass 功能强大些，语法也稍微多一点点。 也有sass和scss 更多选择。
stylus 语法松散（写不写括号和冒号都无所谓），怎么样写都行。 而且功能超强大。 在用法上，感觉比sass更强。
内置函数也多， 推荐使用
看完以下这一段还不能让你叹为观止？ 它还似一门编程语言

-pos(type, args)
  i = 0
  position: unquote(type)
  {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
  {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0

absolute()
  -pos('absolute', arguments)

fixed()
  -pos('fixed', arguments)

#prompt
  absolute: top 150px left 5px
  width: 200px
  margin-left: -(@width / 2)

#logo
  fixed: top left

Answer 7

目前选择的是 LESS，有很多开源项目都使用他，可以阅读学习。

他没有 SASS 要求那么严谨，比如要 mixin（中文不知道怎么翻译）时，SASS 要求被 mixin 样式需要添加 @mixin 声明，调用时也要求用 @include 调用。

不过我很喜欢 SASS 的选择器继承 @extend，这点 LESS 还没有实现，比如：
在 SASS 里：

.menu { color: #000; }
.sub-menu { @extend .menu; }

输出：

.menu, .sub-menu { color: #000; }

但在 LESS 中，只能通过 mixin 实现：

.menu { color: #000; }
.sub-menu { .menu; }

这就导致输出很多冗余的样式：

.menu { color: #000; }
.sub-menu { color: #000; }

至于 Stylus，暂时还没用过，所以无法评价。