Less-lib NPM | npm.io

Personal Less Library

自用Less库

从2013年创建这个库，一点点的添加完善，目前功能已经基本稳定，现在它可以帮助我快速完成几乎所有的样式书写工作。对！就是快速！

为什么选择Less

Sass、Stylus、Less 如何选择？

这个问题是所有初学CSS预编译器的小伙伴最关心的问题。本人在工作中也使用过 Sass 和 Stylus，他们定义 Mixin 时非常便捷，语法类似于常见编程语言，并且有可以定义丰(鸡)富(肋)的函数供开发使用。而 Less 虽然也支持这些能力，但是写法却有些反人类，习惯了常规编程语言的人可能很难适应。

一句话总结：

Sass - 写库便捷，调用繁琐
Stylus - 写库...写不下去，调用懵逼
Less - 写库繁琐，调用快捷

由此我们不难看出，为什么 Bootstrap4.0 会由 Less 改为 Sass，因为 Sass 写库很方便，而使用者又不需要用 Sass 来调用它，只需要加载编译好的 CSS 即可，相比之下 Less 没有任何优势。

然而，我们的日常工作并不是去定义 Mixin，或者是去定义函数，我们的工作实际是需要书写大量页面样式代码，我们需要频繁的去调用之前定义的 Mixin 和函数。基于这个需求，个人而言， Less 无疑是我最佳的选择。

Sass、Stylus、Less 能力对照表

下表是我在使用中发现的一些差异，这里只对有差异的能力进行比较，相同的能力不做对比。

能力	Sass	Stylus	Less
属性嵌套	有	无	无
占位符选择器	有	无	无
条件判断	`@if`、`@else`	`if`、`else`	`when()`、`default()` （写复杂的条件判断会非常繁琐）
迭代	`@for`、`@each`、`@while`	`for in`	`.loop()`（需要手动实现）
字符串转换	加入引号、移除引号	只能移除引号？	加入引号、移除引号
传参	参数不能有`,`（但是CSS属性值有些是可以加`,`的啊）	参数同样不能有`,`	灵活传参，参数中有`,`时，可以使用`;`分隔参数。
定义函数	使用Sass定义的函数	使用Stylus定义函数	不但可以使用Less定义函数，还可以使用js定义函数（你没看错，v2.5+实现了这个能力）
调用 Mixin	繁琐的 `@include`	无参数时必须加`()`，如果 Mixin 和 CSS 属性名称相同，编译器会分不清楚你要写 CSS 还是要调 Mixin，甚至有些场景会出现循环调用的情况。松散的语法就是一把双刃剑，真是成也萧何，败也萧何。	怎么定义，就怎么调用，一切样式块都可以作为 Mixin 来调用，简直酸爽。
属性 merge	无	无	有（写库必备）
插入js表达式	无（想都不用想）	无	有（理论上而言所有 Javascript 内置函数都可以在 Less 中调用）