less 和 sass 的区别

一、编译环境不同?

(1) less是通过js编译   在客户端处理

(2) sass是通过ruby编译 是在服务器端处理

二、变量符不一样

(1) less是使用@，sass是使用 $

三、使用方法

sass支持条件语句，可以使用if{}else{},for{}循环等等。而less不支持。

四、输出设置

less没有输出设置，sass提供4中输出选项：nested, compact, compressed 和 expanded。

输出样式的风格可以有四种选择，默认为nested

nested：嵌套缩进的css代码

expanded：展开的多行css代码

compact：简洁格式的css代码

compressed：压缩后的css代码

五、Sass和Less的工具库不同

（1）Sass有工具库Compass, 简单说，Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

（2）Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

六、Scss

（1）含义：
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

（A）文件扩展名不同。
Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名。
（B）语法书写方式不同。
Sass 是以严格的缩进式语法规则来书写，不带大括号( { } )和分号( ; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

（2）规则：

(a) 混合宏（@mixin声明，@include调用），类似于函数，可以传值或者直接调用。
(b) 扩展/继承（@extend来继承已存在的类样式块，将重复使用的样式延伸 (extend) 给需要包含这个样式的特殊样式。）
(c) 占位符 % placeholder：代码没有被 @extend 调用，他并没有产生任何代码块，编译出来的代码会将相同的代码合并在一起。与常用的 id 与class选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。选择器占位符 %placeholder 有所限制，他不能在不同@media中运行。） 
(d) @use：通过 @use  加载的模块不管被引用了多少次，都只会在编译后输出一次到 css 中。但是使用  @import  多次引入同一模块，会反复输出到 css 中。
(e) @forward：从其他Sass样式表加载mixin，function和变量，并将来自多个样式表的CSS组合在一起。
(f) @layer ：用于模块化组织样式,避免全局污染。
(g) @function：自定义函数，需要调用 @return 输出结果。并能在任何属性值或 Sass script 中使用。
(h) @content：在样式规则中插入外部内容，也就是说允许我们在@include时添加自定义样式到mixin中。
(i) @error：用于抛出错误,编译会在此终止。当某些条件不满足时,可以用@error抛出错误。
(j) @warn：输出一些警告或提示信息,编译不会终止。
(k) @debug：@debug用于输出调试信息,编译不会终止，可以打印变量值或语句来调试SCSS。
(l) @at-root：用于将样式放在根层级,破坏当前的嵌套规则。在需要跳出嵌套导致的重复选择器时使用。

七、总结

less和sass各有各自的好处，二者的出现都是为了同一个目的：提高开发效率！每个开发者根据自己的习惯和爱好来选择。

————————————————
版权声明：本文为CSDN博主「h1227867772」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/h1227867772/article/details/119719120