Less和Sass的区别

背景

CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量，出现了 Sass 和 Less。

 

简介

SASS（英文全称：Syntactically Awesome Stylesheets），使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。且有无数框架使用sass构建，如Compass，Bourbon，和Susy。

LESS是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，Less 仅对 CSS 语言增加了少许方便的扩展，学习很容易。 Less 保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。LESS 拥有四大特性：变量、混入、嵌套、函数。

 

区别：Less和Sass的主要不同就是他们的实现方式。

   Less是基于JavaScript，是在客户端处理的。

   Sass是基于Ruby的，是在服务器端处理的。

 

1、Less在JS上运行，Sass在Ruby上使用。

Sass基于Ruby，需要安装Ruby。Less和Sass在Ruby中构建相似，但它已被移植到JavaScript中。为了使用LESS，我们可以将适用的JavaScript文件上载到服务器或通过脱机编译器编译CSS表。

2、编写变量的方式不同。

Sass使用$，而Less使用@。

在下面的示例中，我们首先在规则外声明了一个名为 link-color 的变量，然后在名为 #main 的规则内声明一个名为 width 的变量，接着把 width 变量赋值给了 CSS 的 width 属性。

LESS：

@link-color: #428bca;
#main {
  @width: 5em;
  width: @width;
}

SCSS：

$link-color: #428bca;
#main {
  $width: 5em;
  width: $width;
}

3、在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

4、Sass有Compass，Less有Preboot

Sass和LESS有可用于集成mixins的扩展（在整个站点中存储和共享CSS声明的能力）。

Sass有适用于mixins的Compass，其中包括所有可用的选项以及未来支持的更新。

LESS有Preboot.less，LESS Mixins，LESS Elements，gs和Frameless。LESS的软件支持比Sass更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与Compass类似的性能。

 

less和sass选哪个用？

１、LESS环境较Sass简单

２、有同学说LESS使用较Sass简单

３、相对而言，国内前端团队使用LESS的同学会略多于Sass

４、从功能出发，Sass较LESS略强大一些

５、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation

６、就国外讨论的热度来说，Sass绝对优于LESS

７、就学习教程来说，Sass的教程要优于LESS。