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。