189 8069 5689
这篇文章主要介绍了sass和scss有哪些区别，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
为东昌等地区用户提供了全套网页设计制作服务，及东昌网站建设行业解决方案。主营业务为做网站、成都做网站、东昌网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
区别：1、Sass是以“.sass”后缀为扩展名，而SCSS是以“.scss”后缀为扩展名；2、Sass是以严格的缩进式语法规则来书写，不带大括号“{}”和分号“;”，而SCSS的语法书写和CSS语法书写方式非常类似，带大括号分号。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
Sass是什么
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。
Sass官方网站：http://sass-lang.com
Scss是什么
Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。
由于 Scss 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 Scss 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 Scss。大部分扩展，例如变量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。
sass和scss的区别
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
下面介绍一下它们的编译规则：
sass的编译
1. sass编译的方法：
命令编译
自动化编译
GUI工具编译
注意： “单文件编译”和 ”多文件编译”。
2. sass输出方式：
| 输出方式 | 编译时，携带参数 | 参考图 |
|---|---|---|
sass嵌套输出方式 nested | sass --watch test.scss:test.css --style nested | 图1 |
sass展开输出方式 expanded | sass --watch test.scss:test.css --style expanded | 图2 |
sass展开输出方式 compact | sass --watch test.scss:test.css --style compact | 图3 |
sass展开输出方式 compressed | sass --watch test.scss:test.css --style compressed | 图4 |
截图 对比：
除了以上的介绍之外，sass还可以进行加法/减法、乘法、除法、变量计算、数字运算、字符运算、颜色运算，等等。
感谢你能够认真阅读完这篇文章，希望小编分享的“sass和scss有哪些区别”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!