前端开发中，使用 Sass 或者 SCSS 来编写 CSS 是非常常见的选择，它们可以让我们更高效地组织和管理我们的样式表。虽然 Sass 和 SCSS 看起来很相似，但它们之间还是存在一些区别的。
Sass 和 SCSS 的发展历程
Sass 是第一代受欢迎的 CSS 预处理器，它使用缩进格式，没有花括号和分号。Sass 根本就没有任何符号，所有的缩进都是用来表达层级的。例如：
$primary-color: #333
nav
background-color: $primary-color
a
color: whiteSCSS 是 Sass 的第二代语法，也是目前最为流行的 CSS 预处理器，SCSS 语法的主要特点是使用花括号和分号，就像普通的CSS一样。SCSS 语法的设计是为了让开发者可以在不太熟悉 Sass 的情况下快速开始使用它。
$primary-color: #333;
nav {
background-color: $primary-color;
a {
color: white;
}
}语法差异
最大的不同就是语法的差异。Sass 是用缩进来表示代码块和层级关系的，而 SCSS 继承了 CSS 的语法，所以使用花括号把代码块括起来。
Sass：
div
span
color: #fff
strong
color: #f00SCSS：
-- -------------------- ---- -------
--- -
---- -
------ -----
-
------ -
------ -----
-
-文件后缀名
Sass 和 SCSS 的文件后缀名也不同，Sass 使用 .sass 后缀，而 SCSS 使用 .scss 后缀。
兼容性
虽然 Sass 比 SCSS 早出现，但 SCSS 的普及更广泛，所以 SCSS 的兼容性更好。
嵌套
Sass 和 SCSS 都可以使用嵌套的方式来组织代码。但使用嵌套的话，只是让你的 CSS 更加清晰有条理，并不会像普通的 CSS 一样产生过多的选择器，因为 Sass 和 SCSS 会把嵌套的选择器合并。
例如：
.container {
width: 100%;
height: 100%;
.box {
width: 20%;
height: 20%;
}
}编译结果：
-- -------------------- ---- ------- ---------- - ------ ----- ------- ----- - ---------- ---- - ------ ---- ------- ---- -
变量
Sass 和 SCSS 都支持使用变量来保存值，这样可以让 code 更加干净可读。
Sass：
$primary-color: #3bbfce a color: $primary-color
SCSS：
$primary-color: #3bbfce;
a {
color: $primary-color;
}继承
使用继承可以减少代码重复性。
Sass：
-- -------------------- ---- ------- ------- ------ ---- ----------------- ---- --------------- ------- ------- ------- --- ----- ---- ----------------- ------- ------- ------- --- ------ ----
SCSS：
-- -------------------- ---- ------- ------- - ------ ----- ----------------- ----- - --------------- - ------- -------- ------- --- ----- ----- - ----------------- - ------- -------- ------- --- ------ ----- -
运算符
Sass 和 SCSS 都支持使用数学运算符。
Sass：
.container width: 100% margin-left: (10px + 5px)
SCSS：
.container {
width: 100%;
margin-left: 10px + 5px;
}指令
Sass 和 SCSS 都支持使用指令来控制代码输出。
Sass：
=unstyled-list list-style: none padding: 0 margin: 0 .nav +unstyled-list
SCSS：
-- -------------------- ---- ------- ------ ------------- - ----------- ----- -------- -- ------- -- - ---- - -------- -------------- -
总结
虽然 Sass 和 SCSS 在语法和文件后缀上有区别，但是两个语法的大多数功能都是一样的，如变量、继承、嵌套以及运算符等。对于新手来说，建议使用 SCSS，因为它更像是普通的 CSS 语法，而且也更加普及和适应。而对于 Sass 的支持者来说，还是继续使用 Sass 吧，毕竟 Sass 的创新对于后来的 SCSS 来说是不可或缺的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c3fc9968c7c53b0e897e9