scss 与 less 的区别

1. 变量不同： less  @     scss $ 

2. 都可以嵌套，伪类嵌套：&:hover，  scss还可以属性嵌套：font:{size:10px;weight:bold;family:aral}

3. 插值使用方式不同： less  @{key}    scss  #{$key}

4. 作用域不同， less 存在变量提升   scss 没有变量提升   $number:1px    @number:1px

5. 都可以运算：@num * 3    @num + 20 ，

　　less 通过 padding:~"20px / 1.5" 进行转义

　　scss 通过 padding:(20px / 1.5) 进行转义

　　scss 加减法中 计算单位必须相同，less 加减法中可以不同单位进行运算 

6. 都有函数

　　1. 相同的函数

　　　　四舍五入：width : round(3.4px)　　=>　　width:3px

　　　　百分比：height:pricentage(0.2)　　=>　　height:20%

　　2. 不同的函数

　　　　scss：随机数：margin:random()　　=>　　margin:1.33333

　　　　less：开方：padding:sqrt(25%)　　=>　　padding:5%

　　3. 自定义函数

　　　　scss：@function sum( $n, $m ) { @return $n + $m }

　　　　　　　font-size:sum(4px , 5px)　　=> 　　fontsize:9px

7. 都有 混入，都能传参

　　less：.hide{ display:none }    =>　　.box{ .hide }

　　　　　　.hide( @color ){ display:none }    =>　　.box{ .hide(blue) }

　　scss：@mixin show{ display:block }　　=>　　@include show

　　　　　　@mixin show( $color ){ display:block }　　=>　　@include show( color )

8. less 有命名空间

　　#nm(){ .show { display:inline-block } }

　　.box7{ #nm.show }

9. 都能继承

　　less：$:extend(.line)　　=>　　display:inline

　　scss：@extend .line　　=>　　display:inline

10. 都能合并

　　less：background+  或者  background+_

　　scss：$background:( a : url ,  b : url )　　=>　　background : map-values($background) 或者 zip(background : map-values($background)... )

11. 媒体查询是基本一样的

　　less：.box10{ @media all and ( min-width : 768px ) width : 600px  ;  @media all and ( min-width : 1440px) width : 900px} 

12. 条件判断

　　less：@count:3　　.get(@cn) when (@cn > 4){ width:100px + @cn }　　.box11{ .get(@count) }

　　scss：$count:5　　.box11{ if($count > 4) { wdith : 100px + $count }  @else{ width : 10px + $count } }

13. 循环（递归）

　　less：@count2:0　　.get2(@cn) when (@cn < 3){  .get2((@cn+1));  .box-@{cn}{ width:100px + @cn } }　　.get2(@count2)

　　scss：for while each 都可以

　　　　　　@for $i from 0 through 2{ .box-#{$i} { width : 100px + $i } }

14. 导入（实现模块化）

　　less：@import url

　　scss：@import url