CSS作为前端开发的三驾马车之一，无时无刻不在影响着前端的发展。为了让 CSS 变得更加的好用，出现了一些预处理语言。 它们让 CSS 彻底变成一门可以使用变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强

Sass

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

后缀为.scss

• 安装

- https://www.sass.hk/install/ 官网

- https://www.bootcdn.cn/sass.js/ BootCDN

- npm

• 变量

在sass中可以将需要复用的属性存在一个变量中。通过$符来表示复用的变量
$variable : pink;
div{color:$variable}

• 嵌套

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地重复的写。
在sass中，可以采用嵌套写法。
/* 编译后 */
#content {
 article {
 h1 { color: #333 }
 p { margin-bottom: 1.4em }
 }
 aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

• 引入

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。
// _reset.scss
html, body, ul, ol {
 margin: 0;
 padding: 0;
}
// base.scss
@import 'reset';
body {
 font: 100% Helvetica, sans-serif;
 background-color: #efefef;
}
引入后base也会存在_reset的属性
默认变量值 - !default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

• 静默注释

css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。
Sass支持静默注释，即 // ,使用静默注释注释便不会出现 

• 混合器

混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作
@mixin border-radius($radius) {
 border-radius: $radius;
 -ms-border-radius: $radius;
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
}
.box {
 @include border-radius(10px);
}

• 继承

基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现
//通过选择器继承继承样式
.error {
 border: 1px solid red;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}

Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

• 安装

- CDN //cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js
- npm install less -g

• 变量

与Sass不同，变量不在是$而是换成了@
/* Less */ 
@color: #999; 
#wrap { color: @color;}
/* Less变量更多使用方法 */
还可用作变量名，属性名，url变量甚至整个变量
变量运算 - 支持大小的运算，还支持包括颜色的运算
/* Less作用域 */
遵循就近原则

• 嵌套

& ：代表的上一层选择器的名字 
/* Less */ 
#header{ 
&title{
#header margin:20px; 
} }
代表 #header title

• 混合方法
• 继承

extend 关键字
同Sass相同
all 关键字
使用选择器匹配到的 全部声明

• 导入

@import （ reference，once，multiple）
- reference 引入的 Less 文件，但不会 编译它
- once 这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析
- multiple 允许导入多个同名文件 

• 函数

isnumber、iscolor、isurl等
更多http://lesscss.cn/functions/

• 注释

// Less提供的一种注释，不会被编译在 CSS 文件中

总结

两者都是适用性很广的框架，没有存在谁好谁坏的情况，只有存在谁更适合当前项目的问题。这边对两者做了简单概述，并没有做很细致的深入解析，如果有兴趣可以做更深入的研究，两者的官网贴在上面。当然优秀的CSS预处理库当然不止这两个，还有许多优秀的库等待着大家去发掘。