原文

Difference Between SASS and SCSS

SASS（Syntactically Awesome Style Sheets）是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。它是一种预处理器脚本语言，将被编译或解释为 CSS。 Sass Script 本身就是一种脚本语言。它的 typing 规则是动态的。

SCSS 通常被称为 Sassy CSS，它是作为 SASS（Syntactically Awesome Style Sheets）的主要语法引入的，它建立在现有的 CSS 语法之上。它使用分号和括号，如 CSS（级联样式表）。 SCSS 是 CSS 的超集，即所有 CSS 功能都将在 SCSS 中可用，并且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 术语都有效。

9 大区别：

区别1

SASS是Syntactically Awesome Style Sheets，是CSS的扩展，提供嵌套规则、继承、Mixins等特性，而SCSS是Sassy Cascaded Style Sheets，与CSS类似，填补了CSS与SASS之间的空白和不兼容。它是在 MIT 许可下获得许可的。它首次出现在2006年。

区别2

SASS 更易于使用且语法更简单，因此无需使用分号、曲线、大括号等，而 SCSS 与 CSS 完全兼容，文件扩展名为 .scss 类型。

区别3

SASS 具有最好的编码标准和良好的官方文档的特点，而 SCSS 更容易学习开发代码。

区别4

SASS 基于 javascript 并支持不同的语言扩展，拥有自己的语法、开源 CSS 预处理器和高级功能，例如控制和指令及其库。

区别5

SASS 更难通过重写代码与现有 CSS 项目集成，而 SCSS 通过采样添加新代码而不是重写现有代码库更容易与现有代码库集成。

区别6

SASS 更易于使用、阅读和编写，而 SCSS 在实现代码方面更具逻辑性和复杂性。

区别7

SASS 变量将以美元 ($) 符号开头，而 SCSS 具有模块化功能，可以通过使用某种注释以更加模块化的方式组织代码。

区别8

SASS 具有高级语法功能，并且其文件具有 .sass 扩展名，而 SCSS 具有类似每个有效 CSS 文件都是 SCSS 文件的功能。

区别9

SASS 与 Ruby 相似，安装需要使用 Ruby，没有严格的代码缩进，而 SCSS 与 CSS 相似，无需任何额外安装或配置即可轻松使用。

区别10

SASS 具有可在 CSS 文件的不同位置使用的局部和全局变量，而 SCSS 具有不同的变量，例如颜色变量，这些变量可以稍后在样式表中使用。

区别11

SASS 具有嵌套功能，可以将 CSS 选择器嵌套显示在 HTML 中，并且难以维护较长的分层嵌套 CSS，而 SCSS 可以处理多个类和不同的嵌套样式。

区别12

SASS 具有文档样式，它比 CSS 更好，并且具有颜色、属性和参数列表的操作功能，而 SCSS 语法具有边距、列表样式、填充、显示等。

区别13

SASS 具有控制指令、功能指令、Mixins 并具有可扩展的特性，而 SCSS 可以与 SASS 一起使用来表示 CSS 类似的特性。

区别14

在最初的开发之后，SASS 扩展到 SassScript。它支持跨平台操作系统。它受到CSS、LESS、YAML等的影响。这个SASS的文件扩展名是.scss和.sass，它的官方实现也是一个使用Ruby开发的开源项目。

结论

SASS 与 SCSS 都是 CSS 预处理器，它们非常有用，可包含在基于 CSS 的 UI（用户界面）或前端框架中以简化开发。这些 SASS 与 SCSS 框架在以编程方式利用强大的 CSS 功能时在高级别的 CSS 功能方面提供了强大的功能。 SASS 是一种 CSS 扩展，其中大部分功能都将被扩展，而 SCSS 是 CSS 的一种超集，其中 CSS 的所有功能都将在 SCSS 中。预处理器的选择取决于通过以有效的方式做出权衡选择来使应用程序高效工作所需的功能和特性。

与SCSS相比，SASS更易于使用并且需要更少的语法或配置，推荐用于需要更快开发范围和更容易开发复杂组件的较大应用程序的情况，而SCSS可以用于优化Mixin特性的情况，以及许多其他有效技术。

SASS 和 SCSS 的区别相关推荐

Sass和Scss的区别
区别: Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: Sass是以".sass"后缀为扩展名,Scss是以scss后缀为扩展名 ...
sass与scss的区别
用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,找了个教程撸了遍==... 异同:简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的 ...
webstorm和intellij idea下如何自动编译sass和scss文件
前言学过css的人都知道,css他不是一个编程语言.虽然你可以用css去写网页样式,但是你却没法使用它进行编程.所以有一句话来描述css我个人觉得再合适不过了,"CSS基本上是设计师的工具 ...
关于sass（scss）、less、postcss、stylus等的用法与区别
一. Sass/Scss.Less.stylus是什么? 它们都是css预处理器.css预处理器的概念:CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项 ...
scss、sass 和 css 的区别
项目中,会经常使用诸如scss.sass的style样式,它们和css有什么区别呢? less大家应该都不陌生,同样的scss.sass一样,它们都可以称为:CSS预处理器语言. 简单来说,scss和 ...
sass、scss、less区别
Sass (Syntactically Awesome StyleSheets),后缀名为.sass,是由ruby语言编写的一款css预处理语言 SCSS (Sassy CSS),后缀名为 .scss ...
Css、less和Sass（SCSS）的区别
随着前端开发的不断发展,CSS也逐渐延伸出了很多新的语言,less和Sass就是其中两种,下面我们就一起来看看它们到底有何区别. 背景 CSS(Cascading Style Sheets,层叠样式表 ...
Sass、Scss、Less和Stylus区别总结
Sass.Scss.Less.Stylus CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架.本文便总结下 Sass.Less CSS.Stylus这三个预处理器 ...
css，sass，scss和less的区别
css,sass,scss和less的区别 1.css 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语 ...

SASS 和 SCSS 的区别