Sass/Scss、Less是什么？

本文主要分享【】，技术文章【Sass/Scss、Less 是什么？】为【CRMEB】投稿，如果你遇到CRMEB,学习笔记相关问题，本文相关知识或能到你。

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 区别

使用：

Less： https://less.bootcss.com/usage/

Sass： https://www.sass.hk/docs/

不同之处

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

Less 有 UI 组件库 Bootstrap,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 代码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 文件。

1.混合不同 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。

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址：
https://gitee.com/ZhongBangKeJi/crmeb_java

Github 地址：
https://gitee.com/ZhongBangKeJi/crmeb_java

本文《Sass/Scss、Less 是什么？》版权归CRMEB所有，引用Sass/Scss、Less 是什么？需遵循CC 4.0 BY-SA版权协议。