less和scss的区别

less和scss都属于CSS预处理器的范畴，也就是CSS的超集，但是两者的语法、如何使用和具体的功能实现还是有差异的。scss是sass的改良版。

1.声明和使用变量

变量符不一样，less采用@符号，scss采用$符号，而且变量的作用域也不一样，scss没有局部变量，满足就近原则，less中{}内定义的变量为局部变量。

下面示例，首先在规则外声明了一个名为link-color的变量，然后在名为#main的规则内声明一个名为width的变量，接着把width变量赋值给了css的width属性。

less:

@link-color: #428bca;
#main {
     @width: 5em;
     width: @width;
}

scss:

$link-color: #428bca;
#main {
     $width: 5em;
     width: $width;
}

2.less环境比scss简单

scss的安装需要安装Ruby环境，less基于JavaScript,需要引入less.js来处理代码输出css。

3.scss支持条件语句，可以使用if{}else{},for{}循环等等。二less不支持。

4.处理机制不一样

less是通过客户端处理的，scss是通过服务端处理，相比较之下less解析会比scss慢一点。

5.Mixin（混合） Less 和 SCSS 的 Mixin（混合）方式不同。

Less 使用 @mixin 关键字来定义多个 CSS 规则，并使用带有 @apply 的选择器来应用混合后的样式；而 SCSS 使用 @mixin 关键字来定义样式，但是使用 @include 将混合样式应用到选择器中。混合可以让开发人员将一组 CSS 规则定义一次并在任何时间引用它们。