Sass/Scss与Less区别
最后更新于：2022-04-02 03:18:29
[TOC]
> [参考](https://www.cnblogs.com/wangpenghui522/p/5467560.html)
## Sass与Scss是什么关系?
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
## 编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件
## 变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样
Less
```
@color: #00c; /* 蓝色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 红色边框 */
}
#footer {
border: 1px solid @color; /* 蓝色边框 */
}
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
```
scss
```
scss-作用域
$color: #00c; /* 蓝色 */
#header {
$color: #c00; /* red */
border: 1px solid $color; /* 红色边框 */
}
#footer {
border: 1px solid $color; /* 蓝色边框 */
}
Sass-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
```
## 输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded
* nested：嵌套缩进的css代码
* expanded：展开的多行css代码
* compact：简洁格式的css代码
* compressed：压缩后的css代码
## Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
```
@if lightness($color) > 30% {
} @else {
}
/* Sample Sass “for” loop */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
```
## 引用外部CSS文件
scss引用的外部文件命名必须以\_开头, 如下例所示:其中\_test1.scss、\_test2.scss、\_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线\_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
```
// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
h1 {
font-size: 17px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}
```
Less引用外部文件和css中的@import没什么差异。
## 总结
Sass的功能比Less强大,基本可以说是一种真正的编程语言了，
Less则相对清晰明了,易于上手,对编译环境要求比较宽松。
考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。
';