1.对比

• less/sass 注释单行不行 多行可以
• sass 以scss扩展名结尾 less 以less扩展名结尾
• 定义变量 less使用@ sass使用$

less vs sass

less：
@number:100px;
@color:red;
@key:margin; @i:2; 
.box@{i}{ width:@number; height:@number; color:@color; @{key}:20px; }

sass: 
$number:100px;
$color:red; 
$key:margin;
$i:2; 
.box#{$i}{ width:$number; height:$number; color:@color; #{$key}:20px; }

• 比较
  • less可以定义局部变量，并且变量可以提升 sass可以定义局部变量，但是不可以提升
  • sass和less 都可以嵌套写法
  • 加减乘除 less加法以前面为准： @num:100px height:10em+@num=height:110em height:@num+10em=height:110px 减法需要在减号中间加空格
  • sass运算单位不同，不能运算
  • 函数： round 四舍五入 percentage:百分比 random：less不能工作 随机数 sqrt:scss不能工作 function:less不能工作
  • 命名空间/混入

less混入
.box{} 
.show{ .box; } 
还是会解析.box样式 
如果加入括号 
.show(){ .box; } 则不会解析.box 
sass %line{} 不会被解析

scss混入：
@mixin show{} 
.box{ @include show; } 
样式都可以带形参 @mixin show（@color）{}

• 只有less有命名空间，sass没有

#space(){ .text{ background:orange; } } 使用 .box{ #space.test; }

• 继承

less
.line{} .box{ &:extend(.line) }

sass
.color{} %line{} .box{ @extend .color; @extend %line; }
```js

• 条件判断、循环

less
.get(@cn) when(@cn>4){ }

sass
 .box{ @if($count>4){

} @else{} }

导入 @import './index.scss'

• sass scss sass后缀文件，不需要书写分号（;）和花括号（{}） 而scss后缀文件中，我们必须书写分号和花括号