定义：
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; }
