Sass和Less两者之间的区别
“我应当选中哪种CSS预处置器说话?”
什么是CSS 预处置器？
CSS 预处置器定义了一种新的说话，其根本思想是，用一种专门的编程说话，为 CSS 添加了一些编程的特性，将 CSS 作为指标生成文件，然后开发者就只有运用这种说话进行CSS的编码工作。
为何要运用CSS预处置器？
CSS仅仅是一个标志说话，不成以自定义变量，不成以援用。
CSS有概括下列几个缺陷：
语法不足强大，比方没法嵌套书写，致使模块化开发中需要书写许多反复的选中器；
没有变量和合理的样式复用机制，使得逻辑上相干的属性值必需以字面量的情势反复输出，致使难以保护。
预编译很容易造成后代选中器的滥用
运用预处置器的长处
供给CSS层缺失的样式层复用机制
减少冗余代码
提高样式代码的可保护性
Sass&Less
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展说话。由于 Less 和 CSS 非常像，Less 仅对 CSS 说话添加了少许利便的扩展，学习很容易。
sass，作为”天下上最成熟、最不乱、最强大的专业级CSS扩展说话”。兼容所有版本的css，且有无数框架运用sass构建，如Compass，Bourbon，和Susy。
SASS版本3.0以前的后缀名为.sass，而版本3.0之后的后缀名.scss。
Sass 和 Less 这类说话，其实可以了解成 CSS 的超集，它们在CSS 原本的语法格局根基上，添加了编程说话的特性，如变量的运用、逻辑语句的支撑、函数等。让 CSS 代码更容易保护和复用。
但阅读器终究确定是只相识 CSS 文件的，它没法处置 CSS 中的那些变量、逻辑语句，所以需要有一个编译的历程，将 Sass 或 Less 写的代码转换成规范的 CSS 代码，这个历程就称为 CSS 预处置。
增补注明
ruby sass
Ruby Sass 是 Sass 的最初实现，但是 已经于 2019年 3 月 26 日将与世长辞。我们已经不再对它供给任何支撑了，请 Ruby Sass 会员 迁移到其它实现版本（LibSass 或 Dart Sass）。
why？
最开端，用 Ruby 编写 Sass 能够很利便地 吸引已有的会员甚至整个 Ruby 生态来运用
后来，Node.js 在前端开发中变得无处不在，而 Ruby 则 逐步淡入了后台。与此同时，Sass 项目的规模 已经远远超出了作者最初的设想，对 Sass 在机能上的需求 也已经超过了 Ruby 的能力。
Dart-sass
由于不如何用sass，谢谢@WashingtonHua的提示
sass于2016年11月正式对外宣布了alpha版本的Dart Sass 42项目，即他们运用Dart对Sass进行了重写。
依据sass-lang官方网站的说法：
Dart Sass是Sass的主要实现，这意味着它在其他实现以前先获得了新功能。它迅速，易于安装，而且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。
纯 JS 版本 比独立版本施行速度慢，但是它很容易集成到 现有的工作流中，而且允许你通过 JavaScript 自定义函数和 importer。通过施行 npm install --save-dev sass 下令将其增加到项目中并通过 require() 引入。
通过 npm 安装时，Dart Sass 供给了一个 JavaScript API 用于 兼容 Node Sass。 完全兼容的工作正在进行中
libSass
Sass 最初是用 Ruby 编写的。LibSass 是用 C/C++ 实现的 Sass 引擎。 中心点在于其简略、迅速、易于集成。
LibSass 只是一个工具库。如需在当地运转（即，编译 Sass 代码)，你需要一个 LibSass 的封装。当前已经有许多 针对 LibSass 的封装了。
Sass C，个用 C 说话开发的封装
sass.cr 是针对 Crystal 编程说话 的 LibSass 封装。
go-libsass 是最活泼的 Go 说话封装
概括拜见 sass.bootcss.com/libsass
Less
Less 是一门 CSS 预处置说话，它扩展了 CSS 说话，添加了变量、Mixin、函数等特性，使 CSS 更易保护和扩展。
Less 可以运转在 Node 或阅读器端。一个合法的CSS代码段自身也是一段合法的LESS代码段。
LESS 供给了变量、嵌套、混合、操纵符、函数等个别编程所需的抽象机制。
变量
变量允许我们在一个地方定义一系列通用的值，然后在整个样式表中调取。
在做全局样式调整的时候，可能只需要修改几行代码就可以了。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}编译为：
#header {
width: 10px;
height: 20px;
}混合（Mixins）
混合（Mixin）是一种将一组属性从一个法则集包括（或混入）到另一个法则集的办法。假如我们定义了一个类（class）如下：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}要是但愿在其它法则集中运用这些属性，只需像下面这样输入所需属性的类（class）名称即可
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}嵌套（Nesting）
Less 供给了运用嵌套（nesting）取代层叠或与层叠联合运用的能力。假如我们有下列 CSS 代码：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}用 Less 说话我们可以这样书写代码：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}用 Less 书写的代码更加简约，而且摹仿了 HTML 的组织构造。
你还可以运用此办法将伪选中器（pseudo-selectors）与混合（mixins）一同运用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示目前选中器的父级）：
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}运算（Operations）
算术运算符 +、-、*、/ 可以对任何数字、色彩或变量进交运算
注意，要是运算符两侧变量单位不一样，在加、减或比拼以前会进行单位换算。盘算的效果以最左侧操纵数的单位类型为准。要是单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
没有单位则不做转换
// 所有操纵数被转换成雷同的单位 @conversion-1: 5cm + 10mm; // 效果是 6cm @conversion-2: 2 - 3cm - 5mm; // 效果是 -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 效果是 4px // example with variables @base: 5%; @filler: @base * 2; // 效果是 10% @other: @base + @filler; // 效果是 15% 乘法和除法不作转换。由于这两种运算在大多数状况下都没成心义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支撑指定区域的。Less 将按数字的原样进行操纵，并将为盘算效果指定明白的单位类型。 @base: 2cm * 3mm; // 效果是 6cm 你还可以对色彩进行算术运算： @color: #224488 / 2; //效果是 #112244 background-color: #112244 + #111; // 效果是 #223355
函数（Functions）
Less 内置了多种函数用于转换色彩、处置字符串、算术运算等。这些函数在Less 函数手册中有细致介绍。
函数的用途非常简略。下面这个例子将介绍怎样应用 percentage 函数将 0.5 转换为 50%，将色彩饱和度添加 5%，以及色彩亮度落低 25% 而且色相值添加 8 等用途：
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}导入（Importing）
你可以导入一个 .less 文件，此文件中的所有变量就可以全部运用了。要是导入的文件是 .less 扩展名，则可以将扩展名省去掉：
@import "library"; // library.less @import "typo.css";
本文仅列举less的几种特性的简略介绍。对于less更细致介绍拜见文末参照 文档2
Sass
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的根基上添加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更增强大与优雅。
特点功能 (Features)
完全兼容 CSS3
在 CSS 根基上添加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行色彩值与属性值的运算
供给控制指令 (control directives)等高级功能
自定义输出格局
变量
sass运用$符号来标识变量(老版本的sass运用!来标识变量。
$highlight-color: #F90;
与CSS属性不一样，变量可以在css法则块定义以外存在。当变量定义在css法则块内，那么该变量只能在此法则块内运用。
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}在声明变量时，变量值也可以援用其他变量。
嵌套（Nesting）
根本用途与less雷同
子组合选中器和同层组合选中器：>、+和~
这三个组合选中器必需和其他选中器配合运用，以指定阅读器仅选中某种特定高低文中的元素。
这些组合选中器可以毫不费劲地利用到sass的法则嵌套中。可以把它们放在外层选中器后边，或里层选中器前边：
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}sass会如你所愿地将这些嵌套法则一一解开组合在一起：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }嵌套属性;
在sass中，除了CSS选中器，属性也可以进行嵌套。
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}嵌套属性的法则是这样的：把属性名从中划线-的地方断开，在根属性后边增加一个冒号:，紧跟一个{ }块，把子属性局部写在这个{ }块中。就像css选中器嵌套同样，sass会把你的子属性一一解开，把根属性和子属性局部通过中划线-连贯起来，最后生成的结果与你手动一遍遍写的css样式同样：
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}关于属性的缩写情势，你甚至可以像下边这样来嵌套，指明例外法则：
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}混合器;
混合器运用@mixin标识符定义，这个标识符给一大段样式给予一个名字，可以轻易地通过援用这个名字重用这段样式。
下边的这段sass代码，定义了一个非常简略的混合器，目的是增加跨阅读器的圆角边框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}然后就可以在样式表中通过@include来运用这个混合器。@include调取会把混合器中的所有样式提掏出来放在@include被调取的地方。要是像下边这样写：
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass终究生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}less及sass都支撑混合器传参，概括内容拜见参照 文档 2、3
导入SASS文件;
css有一个特殊不常用的特性，即@import法则，它允许在一个css文件中导入其他css文件。然而，后果是只要施行到@import时，阅读器才会去下载其他css文件，这致使页面加载起来特殊慢。
sass也有一个@import法则，但不一样的是，sass的@import法则在生成css文件时就把相干文件导入进来。这意味着所有相干的样式被归纳到了统一个css文件中，而无需发起额外的下载要求。
运用sass的@import法则并不需要指明被导入文件的全名。你可以省去.sass或.scss文件后缀
运用SASS局部文件
当通过@import把sass样式分散到多个文件时，你平常只想生成少数几个css文件。那些专门为@import下令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为部分文件。
sass部分文件的文件名下列划线开头。这样，sass就不会在编译时独自编译这个文件输出css
默许变量值;
!default用于变量，含义是：要是这个变量被声明赋值了，那就用它声明的值，不然就用这个默许值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}在上例中，要是会员在导入你的sass部分文件以前声明了一个$fancybox-width变量，那么你的部分文件中对$fancybox-width赋值400px的操纵就无效。要是会员没有做这样的声明，则$fancybox-width将默许为400px。
雷同与悬殊
雷同之处：
Less和Sass在语法上有些共性，比方下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以通报参数的class，就像函数同样；
3、嵌套法则——Class中嵌套class，从而减少反复的代码；
4、运算——CSS中用上数学；
5、色彩功能——可以编纂色彩；
6、名字空间(namespace)——分组样式，从而可以被调取；
7、作用域——部分修改样式；
8、JavaScript 赋值——在CSS中运用JavaScript表达式赋值。
、
当前大局部的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分运用环境，所以不消在意处置机制，以上只是纯正的对照两者自身。
请不要忘怀Dart Sass，它迅速，易于安装，而且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。
在Less中，仅允许轮回数值。
在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能运用递归函数轮回数值。
前提语句
Less 中并不支撑前提语句，固然，可以通过内置函数 if 以及 and，or，not 这些来模拟前提语句。
在 Sass 中是支撑前提语句的，但也不是像其他编程说话直接 if 这样通过保存字来编写，需要加个 @ 符号
框架-
sass框架谁有空可以在评价区增补一下
用哪个？
不晓得～
LESS环境较Sass简略
LESS运用较Sass简略，大约？
相对而言，国内前端团队运用LESS的同窗会略多于Sass
从功能动身，Sass较LESS略强大一些
Sass在市面上有一些成熟的框架，比方说Compass，并且有许多框架也在运用Sass，比方说Foundation
就国外计议的热度来说，Sass绝对优于LESS
就学习教程来说，Sass的教程要优于LESS(自身来说，less官方文档也够用了)。
举荐教程：《CSS教程》《PHP教程》
以上就是Sass 和 Less 两者之间的区另外细致内容，更多请关注 百分百源码网 其它相干文章！
