定义：
less是一种动态样式语言，对css赋予了动态语言的特性，比如变量、继承、运算、函数，既可以运行在客户端，也可以运行在服务器端，依赖JavaScript
sass是一种动态语言，属于缩排语法，比css多出很多功能，比如变量、嵌套、运算、混入、继承、函数等，更容易阅读；
sass与scss关系：sass的缩排语法，对于阅读者很不直观，因此sass对语法进行改良，sass3就变成scss，与原来的语法兼容，只是用{}取代了原来的缩进
为什么要使用less和sass：
因为css只是单纯的属性描述，并不具有变量、条件语句等，css的特性导致了它难组织和维护。
less与sass相同之处：
1.混入 class中的class
2.参数混入 可以传递参数的class
3.嵌套规则 class中嵌套class，从而减少重复的代码
4.运算 使用数学
5.颜色功能 可以编辑颜色
6.名字空间
7.作用域-局部修改样式
8.JavaScript赋值，在css中使用JavaScript表达式赋值
区别之处：
1.less基于JavaScript，是在客户端处理的
很多开发者不会选择Less因为javaScript引擎需要额外的时间来处理代码然后输出修改过的Css到浏览器， 【解决：只在开发阶段使用Less,一旦开发完成，复制Less输出的到一个压缩器，然后用一个单独的css文件来代替Less文件；另一种方式是使用Less App来编译和压缩你的Less文件；这两种方式都是最小化样式输出】
2.sass是基于ruby的，是在服务器端处理的
变量在less和sass中唯一的区别就是，less使用@，sass使用$
3.变量、使用方面的区别
less:
1.变量： 使用@变量名：变量值
2.混合：无参混合，代参混合
3.less的匹配模式，会根据调用时提供的条件只寻找与之匹配的mixins执行，其中@_表示永远需要执行的部分
4.less中的运算，加减乘除可带、可不带单位；颜色运算时，分红绿蓝三组进行运算，组内可进位，组间互不干涉
5.包含了传进来的所有参数：border：@arguments；
6.less中的嵌套保留了html的代码结构 1）嵌套默认是后代选择器，如果需要子代选择器，则在子代前加>2）.&表示上一层 &：表示上一层的hover事件
sass：
1.使用$变量名：变量值，如果变量需要需要在字符中嵌套，则需使用#加大括号包裹 ：border-#{$left}:10px solid #ccc;
2.会使用单位
3.嵌套：选择器嵌套 伪类嵌套 属性嵌套
选择器嵌套 ul{li{}} 后代 ul{>li{}}子代 &表示上一级 属性嵌套：属性名与大括号之间必须有： border：{color：red}
4、混合宏、继承、占位符
①混合宏：声明：@mixin name($param:value){}
调用：@include name(value);
>>>声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less
>>>优点；可以传参，不会生成同名class；
>>>缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！
②继承：声明：.class{} 调用：@extend .class;
>>>优点：继承的相同代码，会提取到并集选择器中，减少冗余代码
>>>缺点：无法进行传参，会在css中，生成一个同名class
③占位符：声明：&class{} 调用：@extend %class;
>>>优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器
>>>缺点：无法进行传参
综上所述：当需要传递参数时，用混合宏；当有现成的class时用继承；当不需要参数，也不需要class时，用占位符
5、if条件结构：
@if 条件{}
@else{}
6、for循环结构：
@for $i from 1 to 10{} 不包含10;
@for $i from 1 through 10{} 包含10;
7、while循环结构：
$j:1;
@while $j<10{
.while#{$j}{
border:#{$j}px solid red;
}
$j:$j+1;
}
8、each循环遍历
@each item in a,b,c,d{
//item表示每一项
}
9、函数：
@function func($length){
$length1:$length*5;
@return $length1;
}
调用：func(10px);
10、使用...将传进来的所有参数，接收到一个变量中
@mixin bordeRadius($param1...){
//使用...将传进来的所有参数，接收到一个变量中
border-radius:$param1;
-webkit-border-radius:$param1;
}
