less 和 sass的区别

规则上相同

变量
嵌套规则
导入
混入
运算
注释
函数写法类似于script、也有一些指令

规则和写法上相同的地方

变量变量也都支持块作用域，类属于js的那

css 复制代码

@var: red; #page { 
    @var: white; #header { 
        color: @var; // white /**/
    } 
}

less的变量是使用@ ,@width
sass是使用 $, ,$ ,width

css 复制代码

@width: 10px; 
@height: @width + 10px;

#header { 
    width: @width; height: @height;
}

嵌套规则（&，嵌套属性）

css 复制代码

#header { 
    color: black;
    .navigation {
        font-size: 12px; 
    } 
    .logo { 
        width: 300px; 
    } 
}

导入
- @import 可以是less、scss、css文件的导入

混入（将一个规则集集合混入到另一个规则集集合中）

Less

css 复制代码

.bordered { 
    border-top: dotted 1px black;
    border-bottom: solid 2px black; 
}

#menu a { 
    color: #111; 
    .bordered(); // 混入规则集及
}
.post a { 
    color: red; 
    .bordered();
}

/* 也可以类似于函数的方式使用*/
.some .selector div { 
    .mixin(#008000); 
}

sass 需要使用@mixin定义，然后在使用@include导入规则集

css 复制代码

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
  /* 也可以类似于函数的方式使用*/
  @include rounded-corners（#000）;
}

运算

less

css 复制代码

@conversion-1: 5cm + 10mm; // 结果是 6cm

sass

css 复制代码

$conversion-1: 5cm + 10mm; // 结果是 6cm 
color: #222 / 2  /* color : #111*/

函数（内置很多函数，也可以类似于混入中的函数方法来使用）

less （函数）

css 复制代码

$conversion-1: 5cm + 10mm; // 结果是 6cm 
color: #222 / 2  /* color : #111*/

sass （SassScript）

css 复制代码

$conversion-1: 5cm + 10mm; // 结果是 6cm 
color: #222 / 2  /* color : #111*/

规则上不相同的

less

转义

css 复制代码

@min768: ~"(min-width: 768px)";  /* ~ 是转义标志符号*/
.element { 
    @media @min768 { 
        font-size: 1.2rem;
    } 
}

映射 maps

css 复制代码

#colors() { 
    primary: blue; 
    secondary: green; 
} 
.button { 
    color: #colors[primary]; /* = colors.primary 这样的方式 */
    border: 1px solid #colors[secondary];
}

sass
- 继承
- 内置控制指令
  
  @if @each @else @while @foreach

区别：

less是支持客户端和服务端使用，而sass是支持服务端运行，目前基本上是都通过构建工具进行预处理之后，直接以css的在客户端展示。
sass算是最早出现的预处理器，有更强大的社区和实践方案、使用案例更多
sass内置的规则也相对比较多