Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(Sassy CSS)。SCSS(Sassy CSS)是CSS语法的扩展。这意味着每一个有效的CSS也是一个有效的SCSS语句，与原来的语法兼容，只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
- Sass与Less区别
使用：
Less： https://less.bootcss.com/usage/
Sass： https://www.sass.hk/docs/
不同之处
- Less在JS上运行，Sass在Ruby上使用。
Sass有工具库Compass, 简单说，Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
2、编写变量的方式不同。
Sass使用$，而Less使用@。
// Sass
$lightColor:#baf;
// Less
@lightColor:#baf;3、Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
4、输出格式不一样
Less无输出格式，Sass可以使用特定的输出格式
- nested：嵌套缩进的css代码
- expanded：展开的多行css代码
- compact：简洁格式的css代码
- compressed：压缩后的css代码
:nested
在执行监测(编译)命令时，可以指定输出格式为nested：
sass --watch styles.scss:styles.css --style nestednested格式下，输出的CSS代码:
div {
padding: 20px;
margin: 20px; }
.one {
background: red; }
.two {
background: yellow; }nested是默认格式，可以不指定。
:expanded
展开格式看起来像开发人员手写的格式。
要将CSS输出设置为展开格式，可以使用如下命令:
sass --watch styles.scss:styles.css --style expanded该格式下，输出的CSS代码:
div {
padding: 20px;
margin: 20px;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: #ff8000;
}:compact
紧凑格式占用的空间要小得多，每个CSS选择符定义只占用一行。
要将CSS输出设置为紧凑格式，可以使用如下命令:
sass --watch styles.scss:styles.css --style compact该格式下，输出的CSS代码:
div { padding: 20px; margin: 20px; }
.one { background: red; }
.two { background: yellow; }
.three { background: #ff8000; }:compressed
压缩格式占用尽可能少的空间，选择符定义不换行，文件最小，一般用于生产版本。
要将CSS输出设置为压缩格式，可以使用如下命令:
sass --watch styles.scss:styles.css --style compressed该格式下，输出的CSS代码:
div{padding:20px;margin:20px}.one{background:red}.two{background:ye..........5、引入外部CSS文件方法命名有一点不一样
引入外部CSS文件
scss引用的外部文件命名必须以_开头, 如下例所示:
其中_test1.scss文件名如果以下划线开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件。
- 混合不同 Mixins
Sass
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
@include error();/*直接调用error mixins*/
}Less
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}7。继承方法不一样
sass的继承：@extend
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
less的继承：类似于mixins .block
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}相同之处
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
为什么选择使用Sass而不是Less？
1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。
2、就国外讨论的热度来说，Sass绝对优于LESS。
3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。
4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。
5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。
源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～
开源地址
Github 地址：