CRMEB JAVA知识科普——Scss、Less是什么，如何区别？

绝地灬酷狼 2023-10-02 21:58 16阅读 0赞

CRMEB [java版新零售社交电商系统][java]，是一款基于Java + Uni-app 开发的新零售社交电商系统，系统代码全开源无加密，独立部署、二开方便，适用于企业新零售、批发、分销、预约、O2O、多店等各种业务需求。

对于很多开发者在了解[新零售社交电商系统][java]我们的时候，对Scss、Less是什么，如何区别？下面就跟小编一起了解下。

## **一. Sass/Scss、Less是什么?** ##

**Sass (Syntactically Awesome Stylesheets)**是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

**Sass**的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(Sassy CSS)。SCSS(Sassy CSS)是CSS语法的扩展。这意味着每一个有效的CSS也是一个有效的SCSS语句，与原来的语法兼容，只是用\{\}取代了原来的缩进。

**Less**也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

## 二. **Sass****与****Less****区别** ##

![980d3175ce6e91bf6aae0dc2652ab9a1.png][]

#### **使用****：** ####

Less： [Less.js 用法 | Less.js 中文文档 - Less 中文网][Less.js _ _ Less.js _ - Less]

Sass： [Sass教程 Sass中文文档 | Sass中文网][Sass_ Sass_ _ Sass]

### **不同之处** ###

1、**Less在JS上运行，Sass在Ruby上使用。**

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

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

**2、编写变量的方式不同。**  
Sass使用$，而Less使用@。

// Sass

$lightColor:\#baf;

// Less

@lightColor:\#baf;

**3、Sass支持条件语句，可以使用if\{\}else\{\},for\{\}循环等等。而Less不支持。**

**4、输出格式不一样**

Less无输出格式，Sass可以使用特定的输出格式

· nested：嵌套缩进的[css代码][css]

· expanded：展开的多行css代码

· compact：简洁格式的css代码

· compressed：压缩后的css代码

#### **:nested** ####

在执行监测(编译)命令时，可以指定输出格式为nested：

sass --watch styles.scss:styles.css --style nested

复制

nested格式下，输出的CSS代码:

div \{

padding: 20px;

margin: 20px; \}

.one \{

background: red; \}

.two \{

background: yellow; \}

nested是默认格式，可以不指定。

#### **:expanded** ####

展开格式看起来像开发人员手写的格式。

要将CSS输出设置为展开格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style expanded

该格式下，输出的CSS代码:

div \{

padding: 20px;

margin: 20px;

.one \{

background: red;

.two \{

background: yellow;

.three \{

background: \#ff8000;

#### **:compact** ####

紧凑格式占用的空间要小得多，每个CSS选择符定义只占用一行。

要将CSS输出设置为紧凑格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style compact

该格式下，输出的CSS代码:

div \{ padding: 20px; margin: 20px; \}

.one \{ background: red; \}

.two \{ background: yellow; \}

.three \{ background: \#ff8000; \}

#### **:compressed** ####

#### **压缩格式占用尽可能少的空间，选择符定义不换行，文件最小，一般用于生产版本。** ####

要将CSS输出设置为压缩格式，可以使用如下命令:

sass --watch styles.scss:styles.css --style compressed

该格式下，输出的CSS代码:

div\{padding:20px;margin:20px\}.one\{background:red\}.two\{background:ye..........

**5、引入外部CSS文件方法命名有一点不一样**

引入外部CSS文件

scss引用的外部文件命名必须以\_开头, 如下例所示:

其中\_test1.scss文件名如果以下划线开头的话，Sass会认为该文件是一个引用文件，不会将其编译为[css文件][css 1]。

6、**混合不同 Mixins**

**Sass**

/\*声明一个Mixin叫作“error”\*/

@[mixin error][]($borderWidth:2px)\{

border:$borderWidth solid \#f00;

color: \#f00;

/\*调用error Mixins\*/

.generic-error \{

@include error();/\*直接调用error mixins\*/

**Less**

/\*声明一个Mixin叫作“error”\*/

.error(@borderWidth:2px)\{

border:@borderWidth solid \#f00;

color: \#f00;

/\*调用error Mixins\*/

.generic-error \{

.error();/\*直接调用error mixins\*/

**7。继承方法不一样**

**sass的继承：@extend**

.block \{

margin: 10px 5px;

padding: 2px;

p \{

@extend .block;/\*继承.block选择器下所有样式\*/

border: 1px solid \#eee;

**less的继承：类似于mixins .block**

.block \{

margin: 10px 5px;

padding: 2px;

p \{

.block;/\*继承.block选择器下所有样式\*/

border: 1px solid \#eee;

### **相同之处** ###

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；  
2、参数混入——可以传递参数的class，就像函数一样；  
3、嵌套规则——Class中嵌套class，从而减少重复的代码；  
4、运算——CSS中用上数学；  
5、颜色功能——可以编辑颜色；  
6、名字空间(namespace)——分组样式，从而可以被调用；  
7、作用域——局部修改样式；  
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

### **为什么选择使用Sass而不是Less？** ###

1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。

2、就国外讨论的热度来说，Sass绝对优于LESS。  
3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。

4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。

5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用\{\}取代了原来的缩进。

6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

[java]: https://www.crmeb.com/index/java
[980d3175ce6e91bf6aae0dc2652ab9a1.png]: https://img-blog.csdnimg.cn/img_convert/980d3175ce6e91bf6aae0dc2652ab9a1.png
[Less.js _ _ Less.js _ - Less]: https://less.bootcss.com/usage/
[Sass_ Sass_ _ Sass]: https://www.sass.hk/docs/
[Bootstra]: https://www.zhihu.com/search?q=%E7%BB%84%E4%BB%B6%E5%BA%93Bootstra&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B:,:106558378%7D
[css]: https://www.zhihu.com/search?q=css%E4%BB%A3%E7%A0%81&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B:,:106558378%7D
[css 1]: https://www.zhihu.com/search?q=css%E6%96%87%E4%BB%B6&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B:,:106558378%7D
[mixin error]: https://www.zhihu.com/search?q=mixin+error&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B:,:106558378%7D