SASS和SCSS之间的区别是什么？-css教程-PHP中文网

首页

web前端

css教程

SASS和SCSS之间的区别是什么？

William Shakespeare

Feb 16, 2025 am 09:08 AM

Sass 和 SCSS：选择哪个预处理器？

What's the Difference Between Sass and SCSS?

核心要点

Sass 和 SCSS 都是编译成 CSS 的预处理器脚本语言，但语法不同。Sass 使用缩进语法，而 SCSS 使用类似 CSS 的语法。这意味着 Sass 不需要分号或括号，而 SCSS 使用括号表示代码块，并使用分号分隔块内的行。
Sass 和 SCSS 的选择取决于个人喜好和项目需求。但是，由于 SCSS 的语法类似，因此对于初学者或已经熟悉 CSS 的人来说，SCSS 可能更容易上手。它也与现有的工具、插件和演示更兼容，这使得它成为许多开发人员更方便的选择。
Sass 和 SCSS 都提供普通 CSS 中没有的高级功能，例如变量、嵌套、mixin 和继承，这些功能可以提高 CSS 的可读性、可维护性和编写效率。但是，使用两者都需要编译步骤，这可能会增加构建过程的复杂性。

What's the Difference Between Sass and SCSS?

本文是 2014 年 4 月 28 日发布文章的更新版本

我写了很多关于 Sass 的文章，但我收到的一些评论清楚地表明，并非每个人都确切地知道 Sass 指的是什么。这里有一些澄清：当我们谈论 Sass 时，我们通常指的是预处理器和整个语言。例如，我们会说“我们正在使用 Sass”，或者“这是一个 Sass mixin”。同时，Sass（预处理器）允许两种不同的语法：

Sass，也称为 缩进语法
SCSS，一种类似 CSS 的语法

Sass 的历史

最初，Sass 是另一个名为 Haml 的预处理器的组成部分，由 Ruby 开发人员设计和编写。因此，Sass 样式表使用类似 Ruby 的语法，没有大括号，没有分号，并且有严格的缩进，如下所示：

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

正如您所看到的，这与常规 CSS 相比有很大不同！即使您是 Sass（预处理器）用户，您也可以看到这与我们习惯的有所不同。变量符号是 ! 而不是 $，赋值符号是 = 而不是 :。非常奇怪。但这就是 Sass 在 2010 年 5 月发布 3.0 版本之前的样子，该版本引入了一种全新的名为 SCSS 的语法，用于 Sassy CSS。这种语法旨在通过引入一种用户友好的 CSS 语法来缩小 Sass 和 CSS 之间的差距。

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

SCSS 比 Sass 更接近 CSS。也就是说，Sass 维护者也努力使这两种语法彼此更接近，方法是从缩进语法中移动 !（变量符号）和 =（赋值符号）到 SCSS 中的 $ 和 :。现在，在启动新项目时，您可能想知道应该使用哪种语法。让我阐明路径并解释每种语法的优缺点。

Sass 缩进语法的优点

虽然这种语法可能看起来很奇怪，但它有一些有趣的点。首先，它更短，更容易输入。不再需要大括号和分号，您不需要所有这些东西。更好！不需要 @mixin 或 @include，当单个字符就足够时：= 和。此外，Sass 语法通过依赖缩进强制执行干净的编码标准。因为错误的缩进很可能会破坏整个 .sass 样式表，所以它确保代码始终干净且格式良好。只有一种编写 Sass 代码的方法：好方法。但要注意！缩进在 Sass 中 意味着某些东西。缩进选择器时，这意味着它嵌套在之前的选择器中。例如：

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

……将输出以下 CSS：

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

将 .element-b 向右推一个级别这一简单事实意味着它是 .element-a 的子级，从而改变了生成的 CSS。请 非常小心 您的缩进！顺便说一句，我觉得基于缩进的语法可能更适合 Ruby/Python 团队而不是 PHP/Java 团队（尽管这是可以争论的，我很乐意听到相反的意见）。

SCSS 语法的优点

对于入门者来说，它完全符合 CSS 标准。这意味着您可以将 CSS 文件重命名为 .scss，它就会 正常工作。自从 SCSS 发布以来，使 SCSS 完全兼容 CSS 一直是 Sass 维护者的首要任务，在我看来，这是一件大事。此外，他们试图尽可能地坚持未来可能成为有效 CSS 语法的语法（因此是 @指令）。因为 SCSS 与 CSS 兼容，这意味着几乎没有学习曲线。语法已经知道：毕竟，它只是带有少量额外内容的 CSS。这在与经验不足的开发人员合作时很重要：他们将能够在不知道 Sass 的任何知识的情况下快速开始编码。此外，它更容易阅读，因为它实际上是有意义的。当您阅读 @mixin 时，您知道它是一个 mixin 声明；当您看到 @include 时，您正在调用一个 mixin。它没有使用任何快捷方式，并且所有内容在大声朗读时都有意义。此外，大多数现有的 Sass 工具、插件和演示都是使用 SCSS 语法开发的。随着时间的推移，这种语法正变得越来越重要，并且成为默认选择，主要是因为上述原因。

最终想法

选择权取决于您，但除非您有充分的理由使用缩进语法进行编码，否则我强烈建议使用 SCSS 而不是 Sass。它不仅更简单，而且更方便。我曾经自己尝试过缩进语法并喜欢它。我喜欢它有多短和容易。在我最后时刻改变主意之前，我实际上正打算将整个代码库移到工作中的 Sass。我感谢我过去的自我阻止了这一举动，因为如果我们使用缩进语法，与我们的一些工具一起工作将非常困难。另外，请注意 Sass 从不使用大写字母，无论您是在谈论语言还是语法。同时，SCSS 始终使用大写字母。需要提醒吗？SassnotSASS.com 可以帮到您！

关于 SASS 和 SCSS 的常见问题解答

SASS 和 SCSS 的主要区别是什么？

SASS（语法上令人惊叹的样式表）和 SCSS（Sassy CSS）都是预处理器脚本语言，解释为级联样式表 (CSS)。两者之间的主要区别在于它们的语法。SASS 遵循基于缩进的语法，这意味着它不需要分号或括号。另一方面，SCSS 遵循类似于 CSS 的语法，使用括号表示代码块，并使用分号分隔块内的行。