Sass和Less的比较
不同之处
1、Less环境较Sass简单
Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。
2、Less使用较Sass简单
LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手。
3、从功能出发，Sass较Less略强大一些
①sass有变量和作用域。
- $variable，like php；
- #｛$variable｝like ruby；
- 变量有全局和局部之分，并且有优先级。
②sass有函数的概念；
- @function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。
③进程控制：
-条件：@if @else；
-循环遍历：@for @each @while
-继承：@extend
-引用：@import
④数据结构：
-l i s t 类 型 = 数 组 ； − list类型=数组； -list类型=数组；−map类型=object；
其余的也有string、number、function等类型
4、Less与Sass处理机制不一样
前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点
5、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
相同之处
Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
实际开发中SCSS-了解和基本使用
sass、scss、less、css的区别
less, sass, scss都是css预处理语言（也是对应的文件后缀名），它们的语法功能比css更强大。
预处理语言使用是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。
细节：
- 后缀名：SASS（Syntactically Awesome StyleSheets）版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss
- 语法规范：
sass没有{}和;, 有严格的缩进规范 ;
scss和css的缩进规范是一致的
我们在实际开发过程中，scss是常用写法
搭建小型测试环境
单独创建一个文件夹来学习scss的使用，为了方便应用scss，我们可以在vscode中安装一个名为easy sass 的插件，它会自动的帮助我们把.scss => .css
目标结构
|- index.html
|- scss/
|------test.scss
步骤
- 新建一个文件夹learn-scss
- 在learn-scss下新建一个index.html
- 新建一个scss文件夹，里面新建一个 test.scss
vscode的插件会自动把.scss文件翻译成.css文件
小结
scss和less一样，是预处理语言；
在vscode中有现成的工具可以把它转成css（在vue项目中不需要用这个功能---webpack会帮我们做）;
SCSS-基本语法
目标
学习scss预处理器的基础语法 ；
变量
定义
sass使用$符号来标识变量
$highlight-color: #f90;
$basic-border: 1px solid black;
上面我们声明了名为 $highlight-color 和$basic-border的变量, 随后我们就可以使用变量了。
使用
`#app {
background-color: $highlight-color;
border: $basic-border;
}`
我们再来看一下模板中的 styles/variables.scss，这个文件中就是我们本次项目用到的所有scss变量
嵌套语法
和less一样，scss同样支持嵌套型的语法
// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $highlight-color;
border:$basic-border;
.container{
font-size:30px;
}
}
转化成css后
#app {
background-color: #f90;
border: 1px solid black;
}
#app .container {
font-size: 30px;
}
&父选择器
假如你想针对某个特定子元素 进行设置
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $highlight-color;
border:$basic-border;
.container{
font-size:30px;
}
a{
color:blue;
&:hover{
color: red;
}
}
}
模块
一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。例如：在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了
格式
@import './xxxx.scss';
示例
新建base.scss，并定义变量
$base-color: green;
在test.scss中引入base.scss
@import './base.scss';
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $base-color;
border:$basic-border;
.container{
font-size:30px;
}
a{
color:blue;
&:hover{
color: red;
}
}
}
小结
scss与less类似，只是一种css样式的预处理语言 (浏览器不能直接使用的，需要转成css)
很多用法都与less类似（变量，嵌套，模块化）不需要花太多精力去学习它。
