1.原理
1.1 Less定义：是一种动态的样式语言,使CSS变成一种动态的语言特性，如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js) 1.2 SaSS定义：是一种动态样式语言，SaSS里面的语法属于缩排语法，对于之前的css相比，多出了很多功能，更容易阅读 1.3 预处理器。Less和SaSS都属于预处理器，它会定义一种新的语言，其总体思想是为CSS增加一些编程的特性，将 CSS 作为目标生成文件， 之后开发者就只要使用这种语言进行CSS的编码工作。
2.两者之间的区别
2.1 编译环境： Sass是在服务端上面处理的，之前是Ruby,现在是Dart-Sass或者是Node-Sass，但是Less在编译时，需要引入less.js来处理Less代码输出CSS到浏览器上，也可以在开发服务器上将Less语法编译成css文件，输出CSS文件到生产包目录，也有在线编译地址。 2.2 变量符 Less是@，而Sass是$,示例代码如下
代码语言：javascript复制//Less-变量定义
@color: #008c8c;
#footer {
border: 1px solid @color;
}
//scss-变量定义
$color: #008c8c;
#footer {
border: 1px solid $color;
}Jetbrains全家桶1年46，售后保障稳定
2.3 输出设置 Less没有输出设置，而Sass有4种输出选项，如下 nested：嵌套缩进的css代码 expanded：展开的多行css代码 compact：简洁格式的css代码 compressed：压缩后的css代码 2.4 Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持，其中if(){}else{}示例代码如下
代码语言：javascript复制@mixin txt($weight) {
color: white;
@if $weight == bold {
font-weight: bold;
}
@else if $weight == light {
font-weight: 100;
}
@else {
font-weight: normal;
}
}
.txt1 {
@include txt(bold);
}编译结果
代码语言：javascript复制.txt1 {
color: white;
font-weight: bold;
}3.总体优点
3.1 提供CSS缺失的样式层复用机制 3.2 减少冗余代码 3.3 提高样式代码的可维护性 3.4 结构清晰，便于扩展可以方便的屏蔽浏览器私有的语法差异 3.5 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/226758.html原文链接：https://javaforall.cn
