*学习笔记
Sass和Less都属于css预处理器，css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数、继承等概念。讲先试试作为目标生成文件，然后开发者就只要使用这种语言进行css的编码工作。
创建.less或.scss文件会生成对应的css文件
语法：
注释：两者用法一样，但是sass的css文件会多出一行@charset "UTF-8";
//单行注释不会被编译出来
/*
多行注释，就是css的注释方式，会被编译出来
*/
sass的css文件会多出一行@charset "UTF-8";
变量：两者变量符号不同
less使用@定义变量，如@number：123px,可以直接引用
sass使用$定义变量，
//变量
$number:123px;
.box2{
width: $number;
height: $number;
}
插值：可以在选择器上或样式属性上或属性值上使用
less使用插值用@{key},
sass使用插值用#{$key}
//插值
$key:margin;
$i:3;
.box#{$i}{
width: $number;
height: $number;
#{$key}:auto
}
作用域：两者不同
less作用域,变量查找用就近原则,局部有变量就不会去找外面的变量
@number:123px;
.box4{
height: @number;
@number:456px;
width: @number;
}
css文件显示height:456px;width:456px
sass作用域,变量查找按顺序从上到下
@number:123px;
.box4{
height: $number;
$number:456px;
width: $number;
}
css文件显示height:123px;width:456px
选择器嵌套、伪类嵌套：
less与sass用法完全相同，注意，伪类嵌套要在伪类前加&符号去掉ul与伪类之间的空格
属性嵌套(Sass)：只有sass有这个功能
运算：可进行数值运算、颜色运算
less与sass有两点不同
①sass比较严谨，单位不同是不可以进行运算的
②默认/是分割的操作，要进行运算可以加括号
函数：预编译中会提供很多内置的函数，并不是所有函数两者都适用的 ，具体函数去查看相应的API文档
举个栗子：
sass还有个特点，他可以自定义函数
混入：把不同的css组合在一起，less和sass混入方式不同
less混入用法
sass混入，要加@mixin创建，用@include引入
命名空间（Less）：只有Less有这个功能
继承：两个盒子有相同样式时，可以使用继承来进行分组，更节约代码。
less的继承用&:extend();
sass的继承用@extend；
合并：把多个值合并到一起,两者不同
less用法
sass用法
媒体查询：两者用法相同
条件：
less用法
sass用法
循环：递归思想
less用法
sass用法，提供了for、if、while等语法
导入：把另外一个文件的代码引入到文件中，两者用法一样
