LESS 和 SASS 的区别

1、编译环境不同

(1)、SASS的安装需要Ruby环境，是在服务端处理的；

(2)、LESS需要引入less.js来处理代码输出CSS到浏览器，也可以在开发环节使用
LESS,然后编译成CSS文件直接使用

2、变量符不同

SASS变量符是$

LESS变量符是@

3、变量作用域不同

SASS作用域

$color:blue;

#header{
    $color:red;
    border:1px solid $color;
}

#footer{
    border:1px solid $color;
}

用 SASS 编译后

#header {
    border: 1px solid red;
}

#footer {
    border: 1px solid red;
}

 LESS 作用域

@color: blue;

#header {
    @color: red;
    border: 1px solid @color;
}

#footer {
    border: 1px solid @color;
}

用 LESS 编译后

#header {
    border: 1px solid red;
}

#footer {
    border: 1px solid blue;
}

可以看出，less和scss中的变量会随着作用域的变化而不同

4、SASS支持条件语句(if、else、for等等)，而LESS不支持

5、引用外部CSS文件不同

scss 引用的外部文件命名必须以_(下划线)开头 ，

       文件名如果以下划线开头的话，scss 会认为该文件是一个引用文件，不会将其编译为css文件

而Less引用外部文件和css中的@import没什么区别

6、工具库不同

sass 有工具库Compass,在其基础上封装了一系列有用的模块和模板，补充强化了
sass的功能；

Less有Ul组件库Bootstrap。.