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

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

核心要点

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

本文是 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 的语法，使用括号表示代码块，并使用分号分隔块内的行。

我可以将 SASS 转换为 SCSS，反之亦然吗？

是的，您可以将 SASS 转换为 SCSS，反之亦然。有几种可用的在线工具可以帮助您将代码从一种语法转换为另一种语法。但是，需要注意的是，在转换过程中，由于语法差异，某些功能可能无法直接转换。

学习 SASS 或 SCSS 是否更容易？

这很大程度上取决于您对 CSS 的熟悉程度。如果您已经熟悉 CSS，您可能会发现 SCSS 更容易学习，因为它的语法非常相似。但是，如果您不熟悉 CSS，您可能会发现 SASS 的基于缩进的语法更简单、更直观。

我可以在同一个项目中同时使用 SASS 和 SCSS 吗？

从技术上讲，您可以在同一个项目中同时使用 SASS 和 SCSS。但是，通常建议坚持使用一种语法，以确保一致性和可读性。混合语法可能会导致混淆，并使您的代码更难维护。

使用 SASS 或 SCSS 比普通 CSS 的优势是什么？

SASS 和 SCSS 都提供普通 CSS 中没有的功能，例如变量、嵌套、mixin、继承等等。这些功能可以使您的样式表更易于阅读和维护，并且还可以节省您编写 CSS 的时间和精力。

SCSS 与 CSS 相同吗？

虽然 SCSS 在语法方面与 CSS 类似，但它们并不相同。SCSS 是一种预处理器语言，它为 CSS 添加了强大的功能，例如变量、嵌套、mixin 和继承。这些功能在普通 CSS 中不可用。

我是否需要特殊的工具来编译 SASS 或 SCSS？

是的，您需要一个编译器才能将 SASS 或 SCSS 转换为 CSS。为此，有许多工具可用，例如 Node-sass、Dart-sass 和 Ruby-sass。这些工具可以集成到您的构建过程中，以自动将您的 SASS 或 SCSS 文件编译成 CSS。

我可以将 SASS 或 SCSS 与任何 CSS 框架一起使用吗？

是的，您可以将 SASS 或 SCSS 与任何 CSS 框架一起使用。许多流行的 CSS 框架，例如 Bootstrap 和 Foundation，甚至提供了其样式表的 SASS 或 SCSS 版本，以便更容易定制。

使用 SASS 或 SCSS 有什么缺点吗？

使用 SASS 或 SCSS 的一个潜在缺点是需要编译步骤。这可能会增加构建过程的复杂性，并且可能需要额外的工具和设置。但是，使用 SASS 或 SCSS 的好处（例如提高可读性和可维护性）通常超过了这个缺点。

SASS 或 SCSS 更流行吗？

SASS 和 SCSS 都被广泛使用，但 SCSS 似乎更受欢迎，这可能是因为它与 CSS 类似。但是，SASS 和 SCSS 之间的选择通常取决于个人喜好和项目的具体需求。

以上是SASS和SCSS之间的区别是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！