SASS 和 LESS 的区别
1、编译环境不同
SASS 的安装需要 Ruby 环境，是在服务端处理的；
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 不支持
/*Sample Sass “if” statement*/
@if lightness($color) > 30%{
...
}
@else{
...
}5、引用外部 CSS 文件
scss 引用的外部文件命名必须以_开头, 如下例所示：
// 源代码：
@import "_test1.scss";
@import "_test2.scss";
// 编译后：
h1{
font-size:17px;
}
h2{
font-size:17px;
}
其中_test1.scss、_test2.scss文件分别设置的h1 h2。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
而 Less 引用外部文件和 css 中的 @import 没什么区别
6、工具库不同
Sass 有工具库 Compass, 在其基础上封装了一系列有用的模块和模板，补充强化了Sass的功能；
Less 有 UI 组件库 Bootstrap。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-07-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
