关于sass:SassScssLess-是什么

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-b…
提取码: yu27
百度云链接不稳固，随时可能会生效，大家放松保留哈。

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

开源地址

码云地址：
https://gitee.com/ZhongBangKe…

Github 地址：
https://gitee.com/ZhongBangKe…